跳转到主要内容
Niquelao 西班牙语 Web 可访问性与前端开发:涵盖 WCAG 标准、可访问组件及 Firefox 扩展,并提供真实代码详解。

本站部分链接为联盟营销链接:如果您通过这些链接购买,我们可能会获得佣金,且不会增加您的成本。这绝不会影响我们的推荐建议。详情请参阅我们的联盟披露声明。 联盟营销披露.

Niquelao » 颜色检查器扩展

» 扩展 colorChecker Niquelao 你觉得效果如何? 2008 年 5 月 25 日,由 Rumoroso —> Accesibilidad web 扩展 colorChecker 于 2008 年 5 月 25 日更新,由 Rumoroso 首先,这里是 colorChecker 扩展的链接,也可以在 Firefox 附加组件中找到。通过该扩展,可以使用 WCAG 1 和 WCAG 2 建议的算法,检查两种颜色的组合是否符合视觉感知要求。 WCAG 1. 准则 2. 不要仅依赖颜色。 2.2 确保前景和背景颜色组合在有颜色缺陷的人观看或在黑白屏幕上观看时提供足够的对比度。 [图像优先级 2,文本优先级 3]。 WCAG 2. 准则 1.4 可区分:使用户更容易看到和听到内容,包括将前景与背景分开。 1.4.3 对比度(最低):文本和文本图像的视觉呈现至少具有5:1的对比度,以下情况除外:(AA级)大字体:大尺寸文本和大尺寸文本图像的对比度至少为3:1;附带:作为非活动用户界面组件一部分的文本或文本图像、纯装饰、图像中的附带文本或任何人都不可见的文本或文本图像没有最低对比度要求。标识:作为标识或品牌名称一部分的文本没有最低对比度要求。 1.4.6 对比度(增强):文本和文本图像的视觉呈现的对比度至少为 7:1,但以下情况除外:(AAA 级) 大字体:大尺寸文本和大尺寸文本图像的对比度至少为 5:1;附带:作为非活动用户界面组件一部分的文本或文本图像、纯装饰、图像中的附带文本或任何人都不可见的文本或文本图像没有最低对比度要求。标识:作为标识或品牌名称一部分的文本没有最低对比度要求。扩展特性 该扩展显示在侧边栏中,可以在正常视力条件下获得结果,也可以在颜色感知(红色盲 (Protanopia)、绿色盲 (Deuteranopia) 和蓝色盲 (Tritanopia))方面遇到困难。 由于 WCAG 2 中的算法被认为更精确,因此该结果被设置为默认显示。使用以下公式测量每个字母的相对亮度(除非它们都是均匀的): L = 0.2126 * R + 0.7152 * G + 0.0722 * B 其中 R 、 G 和 B 定义为: if R sRGB <= 0.03928 then R = R sRGB /12.92 else R = ((R sRGB +0.055)/1.055) ^ 2.4 如果 G sRGB <= 0.03928 则 G = G sRGB /12.92 否则 G = ((G sRGB +0.055)/1.055) ^ 2.4 如果 B sRGB <= 0.03928 则 B = B sRGB /12.92 否则 B = ((B sRGB +0.055)/1.055) ^ 2.4 R sRGB 、G sRGB 和 B sRGB 定义为: R sRGB = R 8bit /255 G sRGB = G 8bit /255 B sRGB = B 8bit /255 “^”字符是求幂运算符。注意:对于有锯齿的字母,请使用从字母边缘算起的两个像素的相对亮度值。使用相同的公式测量紧邻字母的背景像素的相对亮度。使用以下公式计算对比度。 (L1 + 0.05) / (L2 + 0.05),其中 L1 是前景色或背景色中较亮色的相对亮度,L2 是前景色或背景色中较暗色的相对亮度。检查对比度是否等于或大于 7:1 颜色代码可以使用十六进制格式(简写或全写,带或不带 # 号)或 RGB 格式(可以使用逗号或冒号等不同的分隔符)。

Ej: 十六进制格式:#FC5 ó FC5 ó FFCC55 RGB 格式:231,28,197 ó 231:28:197 ó rgb(231,28,197) colorChecker 扩展可以与 ColorZilla 扩展配合使用,因为后者允许直接从网页文档中选择颜色(并复制到剪贴板)。如果安装了该扩展,colorChecker 会识别到它。在这种情况下,按下 Shift + Z 或 Shift + X 将激活 ColorZilla 的吸管工具,并自动将前景色或背景色发送到 colorChecker 进行分析。侧边栏可以通过浏览器的工具菜单展开,或者点击状态栏上的图标,甚至可以使用快捷键 alt + c。如果您在阅读完这些后决定尝试该扩展,这里再次提供 colorChecker 扩展的链接,您也可以从 Firefox 附加组件安装。,该算法采用 Hans Brettel、Francoise Vienot 和 John Mollon 的算法描述,在《美国光学学会杂志》第 V14 期,#10,第 2647 页上发表,并且包括 Gimp 通讯作者的模块和通讯作者:Michael Natterer (mitch@gimp.org) Sven Neumann (sven@gimp.org) Robert Dougherty (bob@vischeck.com) Alex Wade (alex@vischeck.com) 发布 RSS 2.0 的后续评论。请参阅以下注释,或查看指向 http://www.niquelao.net/extension-colorchecker/trackback/ 的引用。 1 条评论 Firefox 附加组件 (2008 年 5 月 25 日) […] 通过此扩展,可以根据 WCAG 1 和 WCAG 2 的要求检查两种颜色之间是否具有足够的对比度。 […] 您可以通过 RSS 2.0 馈送跟踪评论。请参阅评论,或查看您所在位置的引用。我们已获得知识共享许可。


¿Cumplir WCAG sin tocar el código?

Superposición de IA que promete cumplimiento WCAG en 48 horas