WebAIM-考虑到Web可访问性

对比度和颜色可访问性
使用chrome devtools评估对比度

介绍

没有一种适合所有对比度问题的工具,但是ChromeDeveloper工具(或devtools)是在网页中手动测试对比度的最全面的工具。devtools包含在chrome中,对于评估和调试浏览器中的网页非常有用。它有很多特点,但是我们只关注那些评估对比度所必需的。

重要的

虽然chrome devtools中的许多功能都可以通过键盘访问,万博体育官网网址颜色选择器(因此对比度检查器)不是。见谷歌键盘快捷键参考有关在键盘上使用devtools的详细信息。

评估对比度

要使用chrome devtools评估对比度,右击要查看和选择的元素检查.找到风格在devtools窗口中的窗格。这是一个可以找到颜色和测试对比度的区域。

小费

如果样式窗格不可见,按一层楼要打开工具首选项,然后选择恢复默认值并重新加载.

我们在找颜色样式定义,但有时很难确定哪个css规则决定最终的颜色,因为组成元素的样式通常来自不同的地方,甚至不同的文件。这种规则的组合和覆盖是“层叠样式表”(CSS)中的“层叠”。例如,如果有两种颜色规则发生冲突,一个元素在一个CSS规则中用灰色文本定义,在另一个CSS规则中用蓝色文本定义。有一个算法指定将应用哪种样式。

样式窗格显示全部的应用于要检查的元素的样式。还有一个部分显示“计算”样式,或在浏览器合并所有规则后应用于元素的最终样式。如果devtools窗口停靠在屏幕的一侧,计算的样式将显示在风格窗格。

带有突出显示的“计算样式”区域的“样式”窗格

如果窗口停靠在底部或单独的屏幕中,当您单击计算的表,紧挨着风格标签。

已选择计算选项卡

这就是我们要开始的地方。寻找这个词”颜色“在计算属性列表中(按字母顺序列出)。您也可以通过在顶部的过滤框中输入“颜色”来过滤到所有颜色样式定义。单词“color”后面是一个显示元素文本颜色的小框。如果你用鼠标悬停在这个盒子上,将出现一个小箭头。

单击此箭头将在样式窗格中短暂突出显示定义此元素颜色的CSS行。这个CSS行还将有一个显示文本颜色的框。单击此框将显示一个对话框。此对话框顶部是一个颜色渐变,允许您更改元素的当前颜色,以及其他一些颜色选择工具。在此对话框中,您将看到对比度比率,后面是三个图标中的一个:如果通过增强的AAA对比度要求,则显示两个绿色复选标记。如果你只通过AA,一个绿色的勾号,或者如果你失败了,一个红色的失败图标。

带有2.83:1对比度标记为失败的颜色选取器窗口

对比度部分可以展开,以显示您必须满足的对比度级别——AA为4.5:1。或者3:1,如果是大文本。如果你看不到对比度,这可能是因为元素没有定义的背景色。您可以使用滴管工具从页面内选择背景色或从页面中选择不同的背景色。如果你的背景是图像,这是非常有用的,梯度,等。

在对话框顶部的颜色渐变中也会出现一条白线。这就显示了必要的对比度阈值。这条线上的任何颜色都将满足AA对比度要求,而另一侧的任何颜色都将不符合AA。

具有可见对比度功能的扩展颜色选取器

如果在渐变区域中单击以选择新颜色,对比度将更新,新颜色将在网页中应用(直到关闭devtools或重新加载网页)。

检查悬停和焦点状态

您还可以使用devtools检查样式,并测试交互元素的各种状态是否具有足够的对比度。例如链接和按钮。

朝向顶部风格窗格是HOV按钮。选择此按钮将显示元素的几个可能状态。两个最重要的选择是悬停聚焦.选择其中一个选项将强制此状态更改保持到取消选择该选项为止,关闭DevTools,或者重新加载网页。

切换状态区域展开

启用:悬停,您可以在悬停状态下检查此元素的对比度。同样适用于:聚焦。如果背景色在此状态下发生变化或未正确检测到,如上,您可以使用滴管工具从页面中选择正确的背景色。

重要的

对比度检查器仅适用于“颜色:“财产”。虽然可以使用devtools查找边框的颜色样式,大纲,等。,您需要使用其他对比度工具来确定它们的对比度。