色彩对比辅助功能检查器

时间:2018-12-05 19:47:09

标签: accessibility contrast

有人与https://contrastchecker.com/一起工作

我刚刚尝试将#FF0000作为前景,将#FFFFFF作为背景。它说AA 12点,AAA 12点和AAA 18+都失败了。但是然后它说我通过了“颜色”并完全符合颜色要求吗?颜色如何通过类型测试失败但通过颜色测试?

2 个答案:

答案 0 :(得分:1)

因此,这里有一些不同的指标在起作用。

TYPE测试正在测量前景和背景之间的对比度 –该指标首先基于前景中该类型的相对亮度,然后是背景的亮度,然后是这些亮度值用于计算对比度。

COLOR测试正在测量前景和背景之间的色相差异–色相与对比度的计算方法不同,因此一个色相可能会失败,而另一个会通过。

在大多数情况下,最佳做法是根据TYPE测试的结果(对比度)进行颜色选择,但是在某些情况下,结果的访问性会较差。


Paciello Group打造了一个非常出色的对比度分析器应用程序:
https://developer.paciellogroup.com/resources/contrastanalyser/

我强烈推荐它,因为它具有模拟不同类型的色盲对所选前景/背景组合的影响的功能。


一个例子:

红色(#FF0000)前景和黑色(#000000)背景
-以5.3:1的比率通过AA小和AAA大文本
-色差值不能为255(最小值为500)
-亮度差值无法达到76(最小值为125)
- 3/5模拟的色盲类型显示该类型几乎不可见!
即使类型测试通过,也无法访问结果!


红色(#FF0000)前景和白色(#FFFFFF)背景
-仅以4:1的比例通过AA大文本通过
-通过色差值为510(最小为500)
-通过亮度差,值为179(最小值为125)
- 5/5模拟的色盲类型显示的文字非常清晰!
即使类型测试失败,结果也更易于访问!

答案 1 :(得分:1)

如“ COLOR”测试中的工具提示所指出的那样,它不仅可以测试色差(例如对于色盲者),还可以测试亮度差(即对比度):

  

这基于亮度和颜色的差异。这里的及格等级表示您完全符合颜色要求。

这基于旧的W3C工作草案,名为“辅助功能评估和修复工具技术”。参见Checkpoint 2.2 - Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen

不再推荐该测试,并且已被最新的WCAG recommendations 取代(而且很痛苦-但有必要-计算)