了解WCAG 2对比度和颜色要求

介绍

对比度和颜色使用对可访问性至关重要用户(包括有视觉障碍的用户)必须能够感知页面上的内容Web内容可访问性指南(WCAG)2中存在大量精细打印和复杂性,很容易混淆Web内容创建者和Web可访问性评估者本文汇总了理解WCAG 2对比度和颜色要求所需的术语和原则。

WCAG 2“对比度”

在WCAG 2中,对比度是两种颜色之间感知“亮度”或亮度差异的度量(从不使用短语“颜色对比度”)该亮度差异表示为从1:1(例如,白色背景上的白色文本)到21:1(例如,白色背景上的黑色文本)的比率。在白色背景上给出一个参考框架......

  • 纯红色(#FF0000)的比例为4:1。我是红色文字。
  • 纯绿色(#00FF00)的比例非常低,为1.4:1。我是绿色文字。
  • 纯蓝色(#0000FF)的对比度为8.6:1。我是蓝色文字

可以使用以下方法评估各种颜色组合的对比度和WCAG一致性WebAIM颜色对比度检查器

重要

如果反转文本和背景颜色,则对比度保持不变。

WCAG 2中的三个成功标准解决了对比:

一个额外的成功标准,1.4.1颜色的使用,将对比度作为仅由颜色区分的链接要求的一部分。

我们将详细审查这四个成功标准。

1.4.3对比度(最小值)

AA级要求如下:

文本和文本图像的视觉呈现具有至少4.5:1的对比度,除了以下内容:

  • 大文字:大型文本和大型文本图像的对比度至少为3:1;
  • 附带的内容:作为非活动用户界面组件的一部分的文本或图像是纯装饰,任何人都不可见,或者是包含重要其他可视内容的图片的一部分,没有对比度要求。
  • 广告图标:Text that is part of a logo or brand name has no contrast requirement.

以下是一些几乎完全相同的4.5:1对比的文本示例

  • 灰色(#767676)在白色
  • 紫色(#CC21CC)白色
  • 蓝色(#000063)灰色(#808080)
  • 红色(#E60000)黄色(#FFFF47)

对于我们许多人来说,其中一些组合不是很易读这就是为什么4.5:1是一个最小对比度另外,WCAG仅测量颜色亮度差异颜色使用的许多其他方面可能影响感知和可读性。

重要

WCAG需要“至少4.5:1”的对比度,因此无法将对比度提高到4.5:1例如,#777777是常用的灰色阴影,对比度为4.48:1它不符合WCAG对比度阈值。

文字图像

这些对比度要求也适用于图形中的文本,称为WCAG 2中的“文本图像”。

下图中的白色文字对比度不足。

与白色文本的图象在浅兰的背景该文字显示'按类型播放的50首歌曲'

大纲和光环

像轮廓一样的文字效果会影响感知对比度WCAG 2指出,在测量对比度时,文本轮廓或边框的颜色可用作文本或前景色。

具有相同对比度的蓝色轮廓和纯蓝色文本的文本

字母周围的文字发光/光晕可用作背景颜色。

text with a blue background and text with a blue glow have the same contrast ratio

虽然上面的示例都具有相同的WCAG对比度,但具有坚实的前景色和背景色的那些可能更具可读性。

例外

这种4.5:1对比度要求有三个例外:大文本,附带文本和标识。

大文

大文本更容易阅读,因此对比度要求降低到3:1WCAG将大文本定义为18pt及更大,或14pt及更大的文本如果它很大胆。

例如,以下是具有3:1对比度的大文本:

  • 灰色(#949494)18点白色文本
  • 紫色(#C86FF1)14点+白色粗体文字
注意
  • 在网页中,像素对于文本大小比点更常见18个点映射到24个像素,14个点映射到大约18.67个像素。
  • 这也适用于文本图像,但可能难以测量图像中的文本大小。

附带的

WCAG 2.0定义了四种类型的“偶然”文本,这些文本不是满足对比度要求所必需的。

  • 无效:非活动元素,如禁用的“提交”按钮(通过其较低对比度状态在视觉上识别。
  • 纯装饰:装饰性文字无意阅读这方面的一个例子可能是图书馆主页上的书架图片书籍的标题不应由用户阅读。
  • 任何人都看不到:隐藏的文本,如隐形跳过链接在它变得可见之前,不需要满足任何对比度要求。
  • 包含重要其他视觉内容的图片的一部分:不是图像中信息的重要部分的文本,如聚会照片中人物衬衫上的名称标签,不需要满足任何对比度要求。
注意

为了帮助确定图像中的文本是否需要足够的对比度,您可能会认为任何将添加到图像的替代文本中的文本应该满足对比度要求,而不会添加到替代文本的文本通常可以被认为是偶然的。

广告图标

作为徽标或品牌名称一部分的文字没有对比度要求如果我们回顾一下之前使用的文本图像的示例,亚马逊音乐徽标将被免除。

“音乐”这个词在浅蓝色背景上是白色的,但它是亚马逊音乐标志的一部分。

其他考虑因素

1.4.3中没有提到几个重要的对比度考虑因素。

渐变,背景图像和透明胶片

渐变,半透明颜色和背景图像上的文本仍然需要满足对比度要求,但WCAG没有提供有关如何测量对比度的任何指导We recommend testing the area where contrast is lowest.

悬停,焦点等颜色变化

当用户使用鼠标或键盘与文本交互时,文本有时会改变颜色CSS可用于为交互式元素定义悬停,焦点或活动状态没有提及对文本颜色的这些变化的特殊考虑,这意味着所有这些状态中的文本仍必须满足相同的对比度要求。

1.4.6对比度(增强)

AAA级成功标准与AA级1.4.3之间的唯一区别是对比度要求更严格这个需要7:1对比普通文本和4.5:1对于大文本虽然通常建议使用更高的对比度,但本文始终关注1.4.3的合规性。

1.4.11非文本对比

WCAG 2.1于2018年6月出版一个新的2.1成功标准将对比度移到了文本之上1.4.11非文本对比(AA级)如下:

以下的视觉呈现与相邻颜色的对比度至少为3:1:

  • 用户界面组件:识别用户界面组件和状态所需的可视信息,除非活动组件或组件的外观由用户代理确定且未由作者修改;
  • 图形对象:理解内容所需的部分图形,除非特定的图形表示对于传达的信息至关重要。

对比度要求的应用方式有一个显着差异1.4.11要求对比“相对于相邻颜色至少为3:1”,这意味着您可能需要在多个地方测量对比度非文本元素在一侧可能具有与另一侧不同的对比度(如饼图中的楔形),或者它可能包含彼此需要3:1对比度的不同颜色的组件。

带有感叹号的三角形图标用于提醒用户注意重要事项。

图标

此图形由两个重要形状组成 - 感叹号和三角形(通常为这些警报保留)这意味着需要考虑2个对比度:

  1. 白色感叹号与红色三角形之间的对比度大于3:1。
  2. 红色三角形与灰色背景之间的对比度小于3:1。

此图标不符合1.4.11。

用户界面组件

有两种类型的非文本元素,1.4.11表示必须具有3:1的对比度第一个是“用户界面组件”,它是不同功能的控件例如,在一组社交媒体图标中,每个图标是不同的用户界面组件。

Facebook,Twitter,Google +,YouTube和Instagram图标

状态

仅衡量用户界面组件的默认表示的对比度是不够的组件的每个状态还必须具有3:1的对比度状态是组件中的临时更改,通常是因为用户交互,例如使用鼠标悬停或使用键盘进行跳转。

当用户将鼠标悬停在自定义复选框上时,它会变为亮蓝色(#00B0F0)。

此复选框在悬停状态下具有2.5:1对比度,因此失败。

除非“由用户代理确定”

如果使用浏览器提供的默认样式,则这些对比度要求不适用。

在Chrome中,文本框的默认边框具有2.4:1对比度:

名字文本框

此大纲远低于3:1阈值,但由于此颜色由浏览器“确定”并且未由作者自定义,因此可免除由于默认对比度较低,我们建议使用CSS来增加文本框和其他表单输入的对比度。

低对比度“状态”的最常见示例是元素具有键盘焦点时出现的默认轮廓在大多数浏览器中,这个轮廓是一条明亮的蓝线(Firefox是虚线的例外)它非常独特,符合白色背景上的3:1指南,但对某些颜色不太明显,而且对于亮蓝色背景几乎看不见。

几乎看不见的焦点围绕着文字'追随你的兴趣'。

虽然对于这是否是WCAG 2.1失败存在争议,但仍然需要评估和解决这个问题你可以使用CSS:焦点大纲用于自定义焦点指示的属性,使其具有至少3:1的对比度,同时还符合您的网站设计和美学。

注意

如果没有键盘焦点的可见指示,则表示失败2.4.7 - 焦点可见(AA级)

图形对象

此成功标准中涵盖的第二类非文本元素是“图形对象”这个定义中有几个关键术语。

“需要了解内容”

对于需要定义为需要3:1对比度的图形对象的东西,它必须“需要理解内容”。

作为链接的Twitter图标需要3:1的对比度但如果链接还包含单词“Twitter”(至少具有4.5:1的对比度),则不再需要图标来理解内容,因此它没有任何对比度要求。

浅绿色Twitter图标后跟“Twitter”一词

“......除非特定演示必不可少”

Certain types of images may need to be presented in lower contrast so they don't lose meaning or purpose热图必须在某些区域使用低对比度颜色,以便底层页面仍然可见。

维基百科页面的热图

像照片和屏幕截图一样,真实的图像也属于这一类,徽标也是如此。

1.4.1颜色的使用

WCAG 2不禁止任何特定颜色或颜色组合,例如红色和绿色先前的成功标准要求文本和非文本元素具有足够的对比度成功标准1.4.1是A级要求,禁止仅使用颜色来呈现重要内容或说明它写道:

颜色不被用作传达信息,指示动作,提示响应或区分视觉元素的唯一视觉手段。

这是一个非常简单的建议。

在此学校作业表中,作业缺失或延迟的唯一指示是背景颜色这是一个盲目的人,可能会混淆或者在一个色盲或覆盖页面颜色的人身上。

电子表格的屏幕截图,其中缺少的分配以浅红色背景突出显示,而后期分配具有黄色背景。

解决此问题的一种方法是为作业的状态添加第二列(缺失,完整或延迟)您仍然可以使用颜色来增强信息,只要颜色不是呈现此状态的唯一方式事实上,色彩的亮点使得信息更能让用户看到色差。

修复后的电子表格的屏幕截图,其中包含指示分配状态的列。

表格说明和错误

颜色通常用于表单中以识别必填字段和表单错误。

保留为空的必填表单字段可以给出红色边框。

电子邮件地址字段具有红色边框的表单的屏幕截图,表示存在错误。

红色边框是颜色依赖的,并不足够表单字段还需要一个图标:

警报图标已添加到空电子邮件字段中

或内联错误消息:

空电子邮件字段下方会显示“需要电子邮件地址”的错误消息

仅颜色标识链接

WCAG 2对比度和颜色规则在一个地方重叠:当颜色被用作识别链接的唯一方式时这不适用于页面上的每个链接例如,网页标题中的链接被理解为基于页面在页面中的位置以及空格,不同字体或其他样式的使用的链接此要求适用于正文文本和链接文本一起显示的位置,并且仅使用颜色来标识链接(意味着已删除下划线)。

为了获得最佳的可访问性和可用性,请在链接上保留下划线。否则,您需要执行以下操作:

  1. 确保正文和链接文本之间的对比度为3:1。
  2. 提供鼠标悬停和键盘焦点上显示的“视觉提示”(不仅仅是颜色变化)最常见的方法是强调悬停和焦点上的链接。

这些要求是对1.4.3文本对比度要求4.5:1的补充同时满足所有这三个要求可能很困难。

小费

使用颜色依赖的链路对比度检查器检查非下划线链接的对比度要求。

A form ends with a line of text that reads: "By submitting this form, you agree to our Terms of Use." The dark gray (#2E2E2E) body text has 13.6:1 contrast on a white background蓝色(#0079AD)“使用条款”链接具有4.8:1的对比度文本和链接文本都符合WCAG对比度要求。

...但正文和链接文本之间只有2.8:1的对比稍微浅一点的蓝色(#0081B8)会提供完了链接和正文之间的3:1对比:

..但链接现在与背景的对比度低于4.5:1!

对于文本和背景颜色的许多组合,不可能使用非加下划线的链接并且也符合所有WCAG指南This becomes increasingly difficult if the links change color on hover or focus这些状态中的每种颜色还必须与背景具有至少4.5:1的对比度差异。WCAG 2.0和链接颜色在WebAIM博客上更深入地探讨了WCAG对链接颜色的要求。