web main  - 考虑到网络可访问性

对比度和颜色可访问性
评估与Chrome Devtools对比度

介绍

没有一个尺寸适合的所有工具用于测试所有对比问题,但Chrome开发人员工具(或DevTools)是最具全面的工具,用于手动测试网页的对比度。DevTools包含在Chrome中,非常有用,可用于评估和调试浏览器中的网页。它充满了功能,但我们只关注评估对比所必需的。

重要

虽然Chrome DevTools中的许多功能是键盘访问,但彩色选择器(因此对比检查器)不是。万博体育官网网址看到谷歌键盘快捷键参考有关使用带键盘的DevTools的详细信息。

评价对比度

使用Chrome DevTools评估对比度,右键点击您要查看并选择的元素检查。找出风格窗格在devtools窗口。这是您将找到颜色和测试对比的区域。

小费

如果窗格窗格不可见,请按F1要打开工具首选项,请选择恢复默认值并重新加载

我们正在寻找颜色样式定义,但有时很难弄清楚CSS规则确定最终颜色,因为构成元素的样式通常来自不同的位置,甚至不同的文件。这种组合和覆盖的规则是“级联样式表”(CSS)中的“级联”。如果有两个颜色规则冲突 - 例如,则在一个CSS规则中使用灰色文本定义一个元素,另一个元素在另一个CSS规则和蓝色文本中 - 有一个算法指示将应用哪种样式。

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

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

如果窗口停靠在底部或单独的屏幕中,则当您单击计算标签,旁边风格标签。

选择了计算的选项卡

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

单击此箭头将简要介绍定义此元素的颜色的样式窗格中的CSS行。此CSS线还将有一个显示文本颜色的框。单击此框将导致将出现对话框。在此对话框的顶部,允许您更改元素的当前颜色以及其他一些颜色拣选工具的颜色渐变。在此对话框中,您将看到对比度,后跟三个图标之一:如果您通过增强的AAA对比度要求,如果您只通过AA,或者如果您失败,则为一个绿色复选标记

带有2.83:1的彩色拾取器窗口标记为失败

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

白线还将出现在对话框顶部的颜色渐变内。这表明了必要的对比阈值 - 该行的一侧上的任何颜色都会满足AA对比度要求,另一侧的任何颜色将失败AA。

具有对比度的扩展颜色选择器可见

如果单击渐变区域以选择新颜色,则对比度将更新,并且新颜色将应用于网页(直到您关闭DevTools或重新加载页面之前)。

检查悬停和焦点状态

您还可以使用DevTools检查样式和测试以获得适用于各种交互元素状态的对比度,例如链接和按钮。

朝向顶部风格窗格是:霍夫按钮。选择此按钮将显示元素的几个可能的状态。两个最重要的选择是:徘徊:焦点。选择其中一个选项将强制此状态更改以持续,直到您选择选项,关闭DevTools或重新加载网页。

切换状态区域扩展

使用:悬停激活,您可以在悬停状态下检查此元素的对比度。这同样适用于:焦点。如果背景颜色在此状态下变化或未正确检测到,如上所述,您可以使用EyeDropper工具从页面中选择正确的背景颜色。

重要

对比度检查器仅适用于“颜色:“属性。虽然您可以使用devtools查找边框,概述等的颜色样式,但您需要使用其他对比度来确定其对比度。