WebAIM -考虑网页的可访问性

对比和色彩可及性
了解wcag2对对比度和颜色的要求

介绍

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

定义的颜色

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

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

Alpha是一种颜色的不透明度,也会影响对比度。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色彩的使用,引用对比度作为链接要求的一部分,这些链接仅根据颜色进行区分。

我们会详细检讨这四个成功标准。

3对比(最小)

AA级要求内容如下:

文本的视觉呈现和文本的图像的对比度至少为4.5:1,下列情况除外:

  • 大型文本:大文本与大文本图像的对比度至少为3:1;
  • 偶然的:文本或是不活动的用户接口组件的一部分文本的图像,即是纯粹的装饰,其是不可见的任何人,或那些包含显著其他视觉内容中的图像的一部分,没有对比度的要求。
  • 广告图标:作为标志或品牌名称的一部分的文本没有对比要求。

这里有几乎几乎一模一样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将大文本定义为大于18pt的文本,或者大于14pt的文本如果这是大胆的。

例如:

  • 灰色(#949494)白18点文本
  • 白紫色(#C86ff1)14点+粗体文字
请注意
  • 在web页面中,像素比点更常用来表示文本大小。18点对应24像素,14点对应约18.67像素。
  • 在CSS中,粗体字通常具有粗细:大胆,或粗细:700或更大
  • 这也适用于文本图像,但是很难测量图像中的文本大小。

附带的

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

  • 活动:不活动的元素,如禁用的提交按钮(),以较低的对比度状态在视觉上识别。
  • 纯粹的装饰:不适合阅读的装饰性文字。例如,图书馆主页上的书架图片。这些书的标题并不意味着用户可以阅读。
  • 不被任何人看到的:这意味着文本被隐藏,就像一个无形的跳过链接不需要满足任何对比度要求,直到它变得可见。
  • 包含显著其他视觉内容的图片的一部分:文本不是图像中的信息,就像一个人在一个聚会的照片衬衫的名称标签的重要组成部分,不需要满足任何对比度的要求。
请注意

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

标志

作为标志或品牌名称的一部分的文本没有对比要求。如果我们回头看一下前面使用的文本图像示例,amazon music徽标将被豁免。

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

没有提到过

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年六月一新的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的对比度。第一个是“用户界面组件”,它是针对不同功能的控件。例如,在一组社交媒体图标中,每个图标都是一个不同的用户界面组件。

Facebook的,Twitter,谷歌,YouTube和Instagram的图标

这是不够的,衡量一个用户界面组件的默认显示的对比度。该组件的各状态还必须有3:1的对比度。状态是在一个组件暂时的变化,通常是因为用户交互,诸如用鼠标悬停或与键盘互联。

例子

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

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

除非“由用户代理决定”

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

例子

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

名字文本框

本大纲远低于3:1的阈值,但由于这颜色“确定”,浏览器,并没有因笔者定制的,它是免税。由于低默认对比度,我们建议使用CSS来增加对文本框和其他形式的投入对比度。

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

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

虽然有一些争论,这是否是一个WCAG 2.1失败,它仍然是东西,你会想评估和地址。您可以使用CSS:重点和轮廓属性自定义焦点指示器,它至少有一个3:1的对比度,同时还匹配您的网站设计和美学。

请注意

如果有键盘焦点没有明显的迹象,这是一个失败2.4.7 -对焦可见(AA级)

图形对象

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

“需要了解的内容”

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

例子

一个Twitter的图标是一个链接需要3:1的对比度。但是,如果链路还包括单词“推”(至少有一个4.5:1倍的对比度),则图标不再需要了解的内容,因此它不具有任何对比度的要求。

浅绿色的Twitter图标后跟字“推特”

“……除非是必要的特殊演示”

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

例子

维基百科页面的热图

现实生活中的图像,比如照片和截图,也属于这一类。所以做标识。

1.4.1色彩的使用

WCAG 2不禁止任何特定的颜色或颜色组合,如红色和绿色。前面的成功标准要求文本和非文本元素具有足够的对比。成功标准1.4.1 (a级要求)禁止仅使用颜色来呈现重要内容或指示。它写着:

颜色不被用作传送信息,指示动作,提示的响应,或区分可视元素的唯一的视觉装置。

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

例子

在这张学校作业表中,唯一能显示作业缺失或迟交的是背景色。这对盲人来说是不可访万博体育官网网址问的,对色盲的人或者覆盖了页面颜色的人可能会感到困惑或无法访问。

其中缺少的分配是突出了一个淡红色背景上的电子表格的截图,和后期的分配有一个黄色的背景。

解决方法之一是增加第二列中分配的状态(丢失,完整,或晚期)。你仍然可以用颜色来加强信息,只要颜色不是这个状态呈现的唯一途径。事实上,颜色的亮点使信息谁可以看到色差用户更容易获得。万博体育官网网址

修复的电子表格的截图

表格说明及错误

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

例子

例如,一个空的必填字段可能会被指定为红色边框。

在电子邮件地址栏有一个红色边框,表示有错误的表单的屏幕截图。

仅靠红色边界是不够的。表单字段还需要一个图标:

一个警告图标已添加到空白的电子邮件字段

或内联错误消息:

的错误消息“E-mail地址需要”下方出现空电子邮件字段

颜色只有链接标识

WCAG 2的对比度和色彩的规则在一个地方重叠:当颜色被用作标识链路的唯一途径。这并不适用于网页上的每一个环节。例如,在网页中的报头链接被理解为是基于它们在页面位置,使用空白的,并且通常由不同的字体的链接。这一要求指的是身体的文本和链接文本一起出现,并不能单纯用颜色来标识链接(意为下划线已被删除)的地方。为了获得最佳的易用性和可用性,维护上的链接下划线。否则,你需要做到以下几点:

  1. 确保正文和链接文本之间的对比度为3:1。
  2. 提供“视觉提示”(不只是颜色变化),其鼠标悬停和键盘焦点出现。满足这种最常见的方式是强调悬停和重点环节。

这些要求是除了4.5 1.4.3文本对比要求:1。满足所有这三个要求,同时可就难了。

例子

表格的最后一行文字写着:“提交此表格,即表示您同意我们的使用条款。”深灰色(#2E2E2E)正文文本在白色背景上具有13.6:1的对比度。蓝色(# 0079)“使用条款”链接的对比为4.8:1,因此文本符合对比要求。

......但只有2.8:1的主体文本和链接文本之间的对比。蓝色(#0081B8)的稍轻的树荫将提供就在3:链路和主体文本之间1个对比:

…但现在它与背景的对比小于4.5:1 !有了这些文本和背景色,就不可能使用不带下划线的链接,也不可能满足WCAG的指导原则。

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