WebAIM-网络易访问性

评估颜色和对比度——有多难?

测试对比度和使用颜色是Web可访问性评价中最困难的任务之一,以复选框的屏幕截图为例:

带有灰色边框的自定义复选框。复选框的标签是“我同意使用条款”。“使用条款”是一个没有下划线的链接。

这个简单的复选框和标签文本需要至少15次检查,以测试对比度和颜色使用是否符合WCAG要求。

文本的对比

WCAG 1.4.3要求此文本标签与其背景之间的对比度至少为4.5:1(假设文本不是“大文本”)。这需要测量深灰色文本标签和蓝色链接与其灰色背景的对比度。因为这是带有纯色背景的真实文本,挥手将自动识别此文本中的任何对比度错误。您还可以使用其他几个工具对此进行测试,包括WebAIM对比度检测器镀铬工具

复选框的对比

一个默认的复选框将提供足够的对比,并且不需要额外的对比测试,但是因为这个例子包括一个定制的复选框,WCAG 1.4.11需要复选框和背景之间3:1的对比。如果复选框是使用CSS定制的,那么可以使用浏览器检查工具在页面样式中找到它定义的颜色。如果复选框是由一个图像(或多个不同状态的图像)组成,您将需要使用一个滴管工具,如ColorZilla,色彩对比分析仪,或使用DevTools或WAVE中的滴管提取图像颜色值。

依赖于颜色的链接

下划线已从“使用条款”链接中删除。由于使用文本色差将链接与标签的其余部分区分开来,WCAG 1.4.1增加了两项要求,您还必须检查:

  • 正文文本颜色和链接文本颜色之间必须至少有3:1的对比度。这是对文本与背景4.5:1对比度要求的补充。我们的链接对比度检查器允许您检查所有三种颜色组合的一致性,并在必要时确定符合这些要求的颜色。对于某些颜色组合,例如浅灰色背景,可能很难或不可能满足所有这些对比度要求。
  • 链接必须有一个非颜色提示(通常引入下划线),键盘焦点至少为3:1。

我们还建议在鼠标悬停时检查类似提示,但严格来说,这不是WCAG要求。

复选框和链接状态

除了默认状态外,您还必须检查在其他可能状态下的链接文本和复选框的对比。链接的鼠标悬停、键盘焦点、活动状态和访问状态与背景的对比度必须至少为4.5:1。复选框的鼠标悬停、键盘焦点、活动和选中状态的对比度必须至少为3:1。

白色复选标记还必须与深灰色复选框颜色形成至少3:1的对比度。

复选框处于选中状态

键盘焦点指标

目前有三个WCAG成功标准与元素具有键盘焦点的可见指示相关:

  • 2.4.7可见焦点(AA级)要求显示元素具有键盘焦点的可见指示。
  • 1.4.1使用颜色(A级)说明这一指示不能仅仅是颜色的细微变化。
  • 1.4.11非文本对比度(AA级)要求图形对象和用户界面组件的对比度为3:1。

这三个要求之间有一些相互作用,但要点是交互元素必须具有键盘焦点的视觉线索,对比度至少为3:1。这可能是一种颜色变化,与默认状态的对比度至少为3:1,比如改变复选框边框的颜色。然而,轮廓至少3:1的对比度通常是最好的。大多数现代浏览器都会默认提供一致的概要。但是,如果您自定义轮廓颜色,则必须确保它提供至少3:1的对比度。

总和

对于WCAG一致性,此简单示例要求:

至少4.5:1对比度:

  1. 标签文本
  2. 链接文本
  3. 链接文本–鼠标悬停
  4. 链接文本–键盘焦点
  5. 链接文本–活动
  6. 链接文本–已访问

至少3:1对比度:

  1. 在标签文本和链接文本之间
  2. 当链接有键盘焦点时,视觉提示
  3. 复选框具有键盘焦点的视觉提示
  4. 复选框边框–默认值
  5. 复选框边框–鼠标悬停
  6. 复选框边框–键盘焦点
  7. 复选框边框–活动
  8. 复选框边框–选中
  9. 指示复选框的复选标记已选中。

这不包括与错误状态或反馈相关的可能的颜色和对比度问题,因此15是所需的最低检查次数。

浏览器默认值通常是最好的

为了简单和最佳的可访问性,建议坚持使用默认的表单控件和焦点轮廓,并且不要从文本中出现的链接中删除下划线。如果此示例遵循这三个原则,您的测试工作量将大大减少。您只需验证以下内容的4.5:1对比度:

  1. 标签文本
  2. 链接文本
  3. 链接文本–鼠标悬停
  4. 链接文本–键盘焦点
  5. 链接文本–活动
  6. 链接文本–已访问

虽然这是理想的,但现实情况是,许多网站更接近原始示例。这就是为什么颜色和对比度测试仍然难以进行的原因。

评论

  1. 琼·普雷斯顿

    嗨,乔恩,

    谢谢你写信告诉我检查颜色对比的方法。我还有一件事要补充,直到前几天我才发现,我做无障碍设计已经20年了。该项目的负责人表示,用户在阅读左侧导航时遇到了困难。我一直认为颜色太浅了,但用颜色对比检查器总是检查出来。

    我们的文本颜色为#55565a,背景为#ffffff,因此对比度为7.3:1。但是,字体的重量设置为300,使其更轻。无论您使用什么工具,它都会传递颜色对比度。如果你试着用滴管来获取颜色,如果你选择了正确的点,它会给你相同的颜色。即使在屏幕抓取中进行测试,也会得到相同的颜色。

    我感到惊讶的是,在我测试的所有东西中都没有出现这种情况,而且我同样大了,因为我找不到一个颜色对比度检查器,可以将字体的重量放入其中。我搜索并测试了许多检查器,包括此页面上的几乎每个链接:https://www.webaxe.org/color-contrast-tools/.有检查RGBA,但我不确定如何可以找出字体重量的工具。

    您对此有何想法?您在测试时是否遇到过此问题?

    PS:这个模板是六年前(在我在学校发言之前)制作的,所有的颜色都是由平面设计师选择的。

  2. 乔恩·惠汀

    Joan,这是WCAG中不包括的与易读性有关的许多事情中的一个很好的例子。

    WCAG中唯一提到的字体重量和文本对比度是在其“大文本”(对比度要求较低,为3:1)的定义中。14pt+粗体表示大文本,如果文本不粗体,则表示18pt+表示大文本。本文件中有一条关于大文本定义的注释:字体的笔划非常细,或具有不寻常的特征和特征,从而降低了对其字母形式的熟悉度,因此更难阅读,尤其是在对比度较低的情况下

    我认为没有最低字体权重要求的很大一部分原因是很难客观地衡量。一些字体在默认情况下较厚,这对可读性的影响与CSS中的字体重量一样大。另一个原因可能是简化已经很复杂的需求。在WCAG 2.1的早期草稿中,成功标准1.4.11(非文本对比度)基于元素的像素宽度有不同的对比度要求,但为了更容易理解和测试而放弃了它。

  3. 尼贝迪塔

    在标签/按钮的情况下-使用键盘导航时,标签/按钮以矩形框轮廓获得焦点。在这种情况下如何检查对比度,它将属于哪个WCAG指南?

  4. 阿德里安·罗塞利

    琼,

    在WCAG 2的背景下,字体重量/厚度已经提高并考虑过:
    https://github.com/w3c/wcag/issues/665

    WCAG 3着眼于将重量(或笔画厚度)纳入颜色对比检查:
    https://www.w3.org/WAI/GL/WCAG3/2020/how-tos/visual-contrast-of-text/

    今天,您可以使用建议的对比度检查器来考虑字体重量:
    https://www.myndex.com/APCA/

  5. 琼·普雷斯顿

    Jon,感谢你的洞察力,并指出了在测试颜色对比和字体粗细时遇到的问题。在Firefox中,我用他们的工具进行了测试;检查问题:“对比度”和模拟:“色盲(无颜色)”和“对比度损失”。在没有颜色的情况下,它会发现面包屑之间的箭头,在对比度损失的情况下,它会发现所有的东西都有对比度问题。并不令人惊讶的结果。

    我认为现在应该确保图形设计师知道字体类型、颜色(尤其是白色上的灰色)和字体重量对对比度有影响,而这种影响不会显示在颜色对比度检查器中。

    此外,使用RGBA比使用字体权重更好,因为有一些工具可以检查前景和半透明背景。一些工具将RGBA更改为十六进制数字,然后可以将其添加到颜色对比度检查器中。

  6. 琼·普雷斯顿

    Adrian A Roselli,在我提交我的评论之前,我没有看到你的评论,我花了一些时间打印出来。

    感谢您提供有关W3C如何检查此问题的信息。

    我真的很感谢APCA对比度计算器的链接。乍一看,它似乎有点复杂,但一旦我阅读了如何使用它,我相信它将是一个伟大的工具,添加到我的收藏。

    再次感谢阿德里安!

  7. 马修·巴尔加斯

    所以我认为缺少的是法律文本。虽然推荐的尺寸是12px,但我通常看到它在8px-10px左右。你提到过由于重量等变量,最小尺寸要求很难客观测量。然而,大多数公司不得不依赖法律文件的字体标准,经常倾向于Helvetica、Arial和其他类似的无衬线字体家族。使用Arial作为基准是否合理,因为它已经是在线和印刷中最常用的无衬线字体了?此外,如果一个人评估的是低于14分的法律标准,那么更多地依赖WCAG AAA通过/不通过会更好吗?

  8. 格里·纽斯塔特

    WCAG只是一个好的开始,满分并不意味着完全可访问,这是一个很好的例子。万博体育官网网址

    John,现在您可以将用户研究添加到测试示例中

  9. 我们最近重新设计了我们的网站,确保它符合颜色对比度的要求。确实如此。黄色是我们的品牌颜色。这样就有两个盒子了!但我们也有人抱怨说,对视力敏感的人来说,它太亮了。因此,在满足WCAG要求的同时,有些人无法“访问”。万博体育官网网址

留下你的评论





您可以使用这些标记: