对比度检查器的实现

对比度检查器更新 |尼克劳 尼克劳 你觉得怎么样？ 主页 对比度检查器 标题地图 Easyvalidator 关于我… ← 可通过键盘访问的 Google reCAPTCHA HTML 5 标题地图大纲 → 对比度检查器更新 2013年9月24日由 Rumoroso 发布。在一段时间没能关注之后，最近我重新审查了 Firefox 扩展 Contrast Checker 的功能和可用性。之前的版本可以检查页面所有元素的颜色，但它是按需进行的，也就是说，需要按下按钮。我所做的是取消了该按钮的需求，在页面加载完成后自动进行分析。另一方面，我一直认为需要一个选择器，可以通过鼠标移动返回光标所在点的颜色。 类似于 ColorZilla 扩展的功能。因为我想用最简单的技术来实现，经过考虑，我想到了利用 canvas 元素生成整个页面的截图并从中获取信息。我添加了创建该 canvas、检测鼠标位置并获取该坐标像素颜色信息的功能。 我认为这是一个简单的解决方案，可以在不增加复杂性的情况下实现我的目标。此外，由于我经常需要截屏来展示设计或进行无障碍审查，既然已经间接添加了此功能，我只需加入一个下载按钮即可。最后，最后，我对使用方式、元素布局等进行了调整，以尝试提升用户体验。如果我没做到，甚至如果反而退步了，请随时告诉我…… 结果如下…… 本文发布在“无障碍”分类下，标签为：无障碍、颜色、对比度、wcag。保存永久链接。 ← reCAPTCHA de Google accessible con teclado HTML 5 Outline con Headingsmap → 5 条关于“对比度检查器更新”的回复 Pete dijo: 2014 年 2 月 18 日 23:33 我注意到旧插件包含色盲信息。有对“正常”视力的分析和对眼部疾病的分析。 （该网站有旧插件的屏幕截图：http://openweb.eu.org/articles/text-contrasts）有没有办法在更新的插件中查看该信息？是不是又要加回来了？ Rumoroso dijo: 2014年2月19日 0:30 Hi Pete，该插件的最新版本没有为用户提供这些信息，但它仍然可以估计这些值。我正在努力提供查看该信息的选项，但我必须在面板中找到一个位置来执行此操作。如果您需要包含该信息的版本，我可以在此处上传显示该信息的临时版本。问候 Rumoroso dijo: 2014年2月20日 19:00 嗨 Pete，在您发表评论后，我决定是时候上传包含该信息的版本（色盲信息），所以我就这么做了。一旦审核者验证后，它将立即可用。感谢您的评论…问候 Bruce Ritter dijo: 2015 年 2 月 3 日 21:24 嗨，皮特，干得好！我喜欢轻松检查页面上文本的颜色对比度，然后勾勒出有问题的文本以进行图像捕获以将其写入。但我想更进一步，让它真正编写一份报告，甚至将可访问性缺陷输入到我们的缺陷报告系统中，并让这一切自动完成。您是否愿意共享代码，或者将其作为可调用的库提供，该库将返回左侧列表中的相同信息，以及页面上有问题的文本和边界框坐标？ Bruce Ritter dijo: 2015 年 2 月 3 日 21:26 嗨 Pete，干得好！我非常喜欢能够轻松检查页面文本的颜色对比度，然后让有问题的文本显示轮廓以便截图记录。但我希望更进一步，让它能实际生成报告，甚至将无障碍缺陷直接输入到我们的缺陷报告系统中，并全部自动完成。您是否愿意分享代码，或者将其作为一个可调用的库提供，返回与您左侧列表中相同的信息，以及页面上有问题的文本和边界框坐标？发表评论 取消响应 类别 (X)HTML 访问 CSS html5 Javascript 移动网络 Niquelando 重写 关注 @rumoroso Niquelao 由 WordPress 驱动。