WebAIM-考虑到Web可访问性

对比度和颜色可访问性
评估对比度和颜色使用

介绍

本文概述了可用于评估对比度和颜色使用的工具和技术。在开始评估之前,请回顾上一页了解wcag 2对比度和颜色要求.

有几种工具可以帮助您评估对比度,各有其优缺点。本页将介绍以下工具:

  • WebAIM对比度检查器
  • WebAIM链接对比度检查器
  • 彩色滴管
  • 彩色对比度分析仪
  • Microsoft Office中的辅助功能检查器

本文的下一页将概述如何使用chrome devtools评估对比度

WebAIM对比度检查器

WebAIM提供在线对比度检查这将显示两种颜色之间的对比度差异,它将帮助你找到一种符合你想要的对比度的颜色。要使用对比度检查器,在中输入十六进制颜色值前景色背景色领域。也可以单击每个字段旁边的颜色框,使用颜色选择器窗口选择颜色。

对比度检查器结果显示蓝色和白色,对比度为4.28:1。

该工具将显示对比度,并显示正常文本和大文本的“通过”或“失败”AA和AAA级要求。以及WCAG 2.1 AA级非文本要求,因此有五种通过/失败的可能性。

如果没有足够的对比度,使用轻盈滑块可更改前景和/或背景色,直到达到所需的对比度。

目前,此工具只接受十六进制颜色值,不支持alpha(透明度)。如果使用不同的颜色格式,如RGB,您可能需要使用不同的对比工具或使用联机十六进制颜色转换工具.

WebAIM链接对比度检查器

如果链接仅由颜色差异(通常意味着它没有下划线)标识,wcag要求链接文本和周围正文文本之间的对比度为3:1。这是除了链接文本与背景的4.5:1对比度之外,以及正文文本到背景。韦拜姆链接对比度检查器让您一次测试这三个对比度要求。它与对比度检查非常相似,但是有三个颜色字段而不是两个:链接颜色正文文本颜色,和背景色.然后,工具将显示这些颜色是否通过或不通过这三个对比度要求中的每一个。

检查结果显示链接到正文文本失败和其他两个要求通过。

如果其中一个或多个要求失败,使用轻盈滑块以识别可接受的颜色方案。实现这一点的最佳方法通常是使正文文本变暗或使背景变亮(假设为暗亮配色方案)。也可以减轻文本的重量,但这可能会导致链接文本对每个人来说都很难阅读。

注释

为了使界面尽可能简单,此工具不显示大文本的AAA级对比度要求或对比度要求。

波形对比报告示例

Wave可访问性评估工具扫描文本和文本背景样式,并识别大多数不符合WCAG 2.0 AA 4.5:1对比度的文本实例。Wave还根据较低的3:1对比度要求检查“大文本”(由wcag定义)。

要使用Wave查找对比度问题:

  1. WEBAIM.ORG波,输入网页地址,然后进行波扫描,使用AWave浏览器扩展在chrome或firefox中直接运行wave。
  2. 选择对比度按钮位于屏幕左侧边栏上。
  3. 波形检测到的低对比度文本的每个实例旁边都会出现一个图标。
  4. 单击侧边栏或页面内的图标,在侧边栏中查看此文本的对比度。颜色将出现在前景色背景色侧边栏中的字段,然后是对比度。
  5. 使用打火机深色的每个字段下面的选项可以找到符合wcag要求的颜色组合。
注释

Wave无法检测到所有对比度问题。它不考虑背景图像,梯度,透明度,等。它也无法检测图像中的文本。手动扫描这些类型的对比度问题仍然是必要的。

彩色滴管

文本经常出现在图像中,或在图像之上,梯度,以及其他非纯色的背景。在这些情况下测试对比度需要使用“滴管”工具,该工具允许您选择屏幕上特定位置显示的颜色。Colorzilla是一款受欢迎的滴管,可用于火狐.

在浏览器中安装colorzilla之后:

  1. 单击浏览器工具栏中出现的滴管图标。(图标图标截图)将出现十字线图标。
  2. 将十字线置于要选择的颜色的中心。
    colorzilla用于选择颜色
    单击并将颜色值复制到剪贴板。
  3. 将此颜色粘贴到对比度检查器或波形对比度工具中。
小费

放大网页有时会使用滴管选择所需颜色更加容易。使用Ctrl键(Windows)或命令(MAC)和+放大键,这个-缩小键,和重置页面大小。

彩色对比度分析仪

这个彩色对比度分析仪,或CCA,是一个适用于Windows和MacOS的可下载程序,允许您在任何程序中测试对比度。程序允许您使用RGB输入颜色,十六进制,和HSL格式,它支持用alpha(透明度)测试颜色。但它与众不同的主要特点是它能够使用滴管工具测量屏幕上任何东西的对比度。

要做到这一点,在中选择滴管前景色部分并使用滴管选择文本或前景颜色。如果背景不是白色,对…也一样背景色滴眼剂如果颜色组合符合aa和aaa对文本的要求以及wcag 2.1 aa对非文本内容的要求,CCA将通知您。

CCA

CCA最大的优势也可能是它最大的弱点——它与网络浏览器是分离的。如果评估人员能够轻松地深入了解网页的HTML和CSS,使用wave和chrome devtools检查对比度通常更有效。但是CCA是一个很好的工具,可以评估图像中的文本,在评估电子文档时,它真的很亮,例如Word和PDF文件。

注释

早期版本,被称为“CCA经典”,也可以下载。新版本总体上更加精致实用,但早期版本有几个显著的优势:

  • 更好的键盘功能,包括在颜色选择器中使用箭头键的功能。这使得从文本字符等小区域中选择颜色更加容易。
  • 只改变颜色的亮度或亮度的能力。这是一个重要的功能,当试图找到一个更暗的阴影,满足wcag对比度的要求,而颜色本身变化较少。为了实现这一点,选择选项>显示颜色滑块>并检查单纯疱疹病毒.然后使用价值向窗口底部滑动以使颜色变亮或变暗。
    CCA经典,突出显示值滑块

Microsoft Office 365辅助功能检查器

报告两个低对比度文本实例的Microsoft Word辅助功能检查器的屏幕截图

Microsoft Office最近开始在其内置的辅助功能检查器中识别低对比度文本。此功能当前仅在Office 365 for Windows中可用,但它是一个受欢迎的附加功能,有望在未来的Office for Mac版本中也包括在内。

要检查Word中的低对比度文本,幻灯片演示文稿软件,和Excel,选择回顾制表符>检查辅助功能.低对比度的文本在检查器结果中标识为“难以阅读的文本对比度“。

单击结果直接跳到文档中的该问题。

它同时评估文本和背景色,它会自动将较低的3:1对比度应用于大文本。然而,像其他工具一样,手动扫描图像中的文本,或图像/渐变等上的文本。仍然是必要的。

找到你自己的过程

没有一个“最好”的工具来测试对比度。您使用的工具将取决于正在评估的内容和个人偏好。同样地,没有一个测试过程最适合所有内容。但大多数对比度评估至少包括这三个“步骤”(尽管顺序可能有所不同):

  1. 对潜在问题的初步扫描,如:
    1. 颜色依赖性(在链接和形式中常见)
    2. 低对比度文本
    3. 图像中的文本
    4. 图形对象或用户界面组件,如WCAG 2.1所定义
    5. 鼠标悬停和键盘焦点状态
  2. 如果可能的话,使用Wave或Microsoft Office中的辅助功能检查器进行自动扫描(仅在Office 365 for Windows中可用)。
  3. 使用对比度检查器手动测试其他潜在问题,ColorZillaDevTools颜色对比分析仪,或者这些的任何组合。

评估对比度和颜色的使用需要花费大量的时间和精力,但随着时间的推移,这个过程会变得更加自然。您首选的工具和方法可能会随着经验的变化而改变,并且可能会超出本文所概述的范围。但是应用本文中的原理和步骤将为WCAG 2所需要的和如何测试提供坚实的基础。