WebAIM-考虑到Web可访问性

对比度和颜色可访问性
了解wcag 2对比度和颜色要求

介绍

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

定义颜色

颜色可以用几种方式定义。例如,这个蓝色的阴影通常可以用三种不同的方式定义网页样式:

  • RGB(97)97,255):红色的量,绿色,蓝色形成一种颜色,每种颜色都以0到255之间的数字表示。
  • α6161FF:这是一种“十六进制”格式,其中红色/绿色/蓝色值以六个字母或数字的组合显示。通常称为“十六进制”,这是网页中非常常见的格式。
  • HSL(240)100%,69%)色调,饱和,而亮度则更接近于人们感知颜色的方式。改变一种颜色的“亮度”会改变它与另一种颜色的对比度。

阿尔法,它是一种颜色的不透明度或透明度,也会影响对比度。alpha以介于0(完全透明)和1(完全不透明)之间的数字表示。减少文本的alpha通常会降低其对比度,因为您允许底层颜色溢出。

wcag 2“对比度”

在WCAG 2中,对比度是对感知到的“亮度”或两种颜色之间亮度差异的测量(从不使用“颜色对比度”一词)。亮度差表示为1:1(例如白底白字)到21:1(例如,白色背景上的黑色文本)。为了给出一个参照系,在白色背景上…

  • 纯红色(ff0000)的比例为4:1。我是红色的文字。
  • 纯绿色(00ff00)的比率非常低,为1.4:1。我是绿色文字。
  • 纯蓝色(000ff)的对比度为8.6:1。我是蓝色的文字.
重要的

如果文本和背景色颠倒,对比度保持不变。

wcag 2地址对比中的三个成功标准:

一个额外的成功标准,1.4.1颜色的使用,参考对比度作为链接要求的一部分,这些链接仅通过颜色区分。

我们将详细回顾这四个成功标准。

1.4.3对比度(最小)

AA级要求如下:

文本和文本图像的视觉呈现具有至少4.5:1的对比度。除以下情况外:

  • 大文本:大尺度文本和大尺度文本图像的对比度至少为3:1;
  • 附带的:作为非活动用户界面组件一部分的文本或文本图像,纯粹的装饰,任何人都看不见,或者是包含重要其他视觉内容的图片的一部分,没有对比度要求。
  • Logotypes:作为标识或品牌名称一部分的文本没有对比度要求。

以下是一些对比度几乎精确到4.5:1的文本示例

  • 灰色(767676),白色
  • 紫色(CC21CC)白色
  • 蓝色(000063),灰色(808080)
  • 红色(E60000),黄色(ffff47)

对我们许多人来说,其中一些组合不太可读。这就是为什么4.5:1是极小值对比度。

重要的

wcag要求“至少4.5:1”对比度,所以对比度不能四舍五入到4.5:1。例如,#777777是一种常用的灰色阴影,对比度为4.48:1。它不符合wcag对比度阈值。

文本意象

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

例子

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

浅蓝色背景上的白色文本图像。这篇文章读的是“50首按流派播放最多的歌曲”

轮廓和光晕

文本效果,轮廓相似,会影响感知对比度。wcag 2指出,在测量对比度时,文本轮廓或边框的颜色可以用作文本或前景颜色。

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

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

具有蓝色背景的文本和具有蓝色辉光的文本具有相同的对比度

例外情况

4.5:1对比度要求有三个例外:大文本,附带文本,和标志类型。

大文本

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

例如:

  • 灰色(949494)18点白色文字
  • 紫色(C86FF1)14点+白色加粗文本
注释
  • 在网页中,像素对于文本大小比点更常见。18点对应24像素,14点对应18.67像素。
  • 在CSS中,粗体文本通常具有字体粗细:粗体,或字体权重:700或更大
  • 这也适用于文本图像,但在图像中很难测量文本大小。

附带的

wcag 2.0定义了四种不需要满足对比度要求的“附带”文本。

  • 不活跃的:非活动元素,像一个被禁用的提交按钮()通过其低对比度状态进行视觉识别。
  • 纯装饰:不能阅读的装饰性文字。例如图书馆主页上的书架图片。这些书的书名不应该由用户阅读。
  • 任何人都看不见:要隐藏的文本,像隐形的跳过链路在可见之前不需要满足任何对比度要求。
  • 包含重要其他视觉内容的图片的一部分:不是图像信息重要组成部分的文本,就像派对照片中某人衬衫上的姓名标签,不需要满足任何对比度要求。
注释

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

标识类型

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

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

未提及

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

梯度,背景图像,和透明胶片

渐变文字,半透明颜色,背景图像仍需满足对比度要求,但是,wcag没有提供任何关于如何测量对比度的指导。我们建议通常测试对比度最低的区域。

悬停时颜色改变,集中,等。

当用户使用鼠标或键盘与文本交互时,文本有时会改变颜色。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的对比度。

例子

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

偶像

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

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

此图标不符合1.4.11。

用户界面组件

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

脸谱网,Twitter,谷歌+,YouTube和Instagram图标

状态

它不足以测量用户界面组件的默认表示的对比度。组件的每个状态也必须有3:1的对比度。状态是组件中的临时更改,通常是因为用户交互,例如用鼠标悬停或用键盘点击。

例子

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

此复选框在悬停状态下的对比度为2.5:1,所以它失败了。

除非“由用户代理决定”

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

例子

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

名字文本框

这个轮廓远低于3:1的阈值,但由于这种颜色是由浏览器“决定”的,而不是由作者自定义的,这是免除的。由于低默认对比度,我们建议使用CSS来增加文本框和其他表单输入的对比度。

低对比度“状态”最常见的例子是当元素具有键盘焦点时出现的默认轮廓。在大多数浏览器中,这个轮廓是一条明亮的蓝线(火狐是虚线的例外)。它在白色背景上相当独特,但在某些颜色下不太明显,在明亮的蓝色背景下几乎看不见。

几乎看不见的焦点围绕着文字“跟随你的兴趣”

虽然关于这是否是wcag 2.1失败存在一些争论,它仍然是您想要评估和解决的问题。您可以使用css:focus和outline属性自定义焦点指示器,使其具有至少3:1的对比度。同时也符合你的网站设计和美学。

注释

如果没有键盘焦点的可见指示,这是一个失败的2.4.7-可见焦点(AA级).

图形对象

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

“需要了解内容”

对于需要3:1对比度的图形对象,必须“理解内容”。

例子

作为链接的Twitter图标需要3:1的对比度。但如果链接中还包含“twitter”这个词(至少有4.5:1的对比度)。然后不再需要图标来理解内容,所以它没有任何对比度要求。

浅绿色Twitter图标,后跟“Twitter”

“…除非特定的陈述是必要的”

某些类型的图像可能需要以较低的对比度呈现,这样它们就不会失去意义或目的。热图必须使用低对比度颜色,以便底层页面仍然可见。

例子

维基百科网页的热图

真实生活中的意象,比如照片和截图,也属于这一类。逻各斯也是如此。

1.4.1颜色的使用

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

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

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

例子

在这个学校作业表中,唯一表明作业丢失或延迟的是背景色。这对盲人来说是不可接万博体育官网网址近的,对于色盲或覆盖页面颜色的人来说,这可能会令人困惑或无万博体育官网网址法访问。

电子表格的屏幕截图,其中缺少的作业以浅红色背景突出显示,迟交的作业背景是黄色的。

解决此问题的一种方法是为分配的状态添加第二列(缺少,完成,或迟到)。你仍然可以用颜色来加强信息,只要颜色不是呈现这种状态的唯一方式。事实上,颜色突出显示使可以看到颜色差异的用户更容易访问信息。万博体育官网网址

已修复电子表格的屏幕截图

表格说明和错误

表单中经常使用颜色来标识必需的字段和表单错误。

例子

例如,保留为空的必需字段可能会有一个红色边框。

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

红色边界本身是不够的。表单域还需要一个图标:

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

或内联错误消息:

“需要电子邮件地址”的错误消息出现在空电子邮件字段下面

链接的仅颜色标识

wcag 2对比度和颜色规则在一个地方重叠:当颜色被用作识别链接的唯一方法时。这不适用于页面上的每个链接。例如,网页标题中的链接被理解为基于其在网页中的位置的链接,使用空格,通常是用一种独特的字体。这一要求是指正文文本和链接文本一起出现的地方,单独使用颜色来标识链接(意味着下划线已被删除)。为了获得最佳的可访问性和可用性,保持链接的下划线。否则,您需要执行以下操作:

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

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

例子

表单以一行文本结尾:“通过提交此表单,您同意我们的使用条款。”深灰色(2E2E2E)正文在白色背景上有13.6:1的对比度。蓝色(0079ad)“使用条款”链接的对比度为4.8:1,因此,文本符合对比度要求。

…但是正文文本和链接文本之间只有2.8:1的对比度。略淡的蓝色(0081b8)将提供刚刚结束3:1链接和正文文本之间的对比:

…但现在它与背景的对比度小于4.5:1!有了这些文字和背景色,不可能使用无下划线的链接,也不可能满足wcag指南。

如果链接在悬停或聚焦时改变颜色,这些状态下的每种颜色与背景之间的对比度必须至少有4.5:1的差异,这就变得越来越困难。wcag 2.0和WebAIM博客上的链接颜色更深入地探讨了wcag对链接颜色的要求。