WebAIM  - 无障碍记

对比度和色彩无障碍
评估对比度和色彩使用

介绍

本文概述工具和可用于评价对比度和色彩运用技巧。在开始评测之前,请审查前一页理解WCAG 2对比度和色彩要求

还有帮助您评估相反,每一个都有自己的长处和短处的工具。该页面将包括以下工具:

  • WebAIM对比检查
  • WebAIM链接对比检查
  • ColorZilla滴管
  • 色彩对比分析
  • 辅助功能检查器在Microsoft Office

本文中的下一个页面将概述如何使用Chrome DevTools评估对比

WebAIM对比检查

WebAIM提供网上对比检查将目前的对比度差异两种颜色之间,并会帮助您找到符合的对比度所需水平的颜色。要使用我们的造影检查,在输入十六进制颜色值前景色背景颜色领域。您也可以单击颜色框旁边的每个字段选择使用颜色选择器窗口的颜色。

对比检查结果显示在白色与蓝色的4.28:1和的对比度。

该工具将显示对比度和显示您是否“合格”或“不合格”等级AA和AAA的正常文本和大文本,并WCAG 2.1 AA级别的非文本规定的要求,所以有五个合格/不合格的可能性。

如果没有足够的对比度,使用亮度滑块来改变前景和/或背景颜色,直到到达期望的对比度。

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

WebAIM链接对比度检查

如果链路仅由色差识别(通常这意味着它不加下划线),WCAG需要3:链接文本和周围正文之间1的对比度。这是除4.5:链接文本的背景,正文为背景的1的对比度。该WebAIM链接对比度检查可以让你在一次测试这三个反差的要求。这是非常相似的对比检查,但有三个色域,而不是两个:链接颜色正文文本颜色背景颜色。然后,该工具将显示,如果这些颜色及格或不及格的每一个这三个反差的要求。

检查结果显示链接正文失败,其他两个要求传球。

如果一个或多个的这些要求失败,请使用亮度滑块,以确定可接受的颜色方案。完成这一任务的最好方法是典型地变暗正文文本或减轻背景(假设光颜色方案的暗)。这也可能是可以减轻的文字为好,但这可能会导致更硬给大家看了链接文本。

注意

为了使接口尽可能简单,这个工具不显示AAA级对比度的要求或对比度要求大文本。

WAVE对比报告例子

该WAVE访问性评估工具扫描文本和文本背景样式,并标识不符合WCAG 2.0 AA 4.5文本的大多数情况下:1和的对比度。WAVE还检查“大文字”(如由WCAG定义)靠在下3:1倍的对比度的要求。

要使用WAVE找到相反的问题:

  1. wave.www.kanehsu.com,输入网页地址,并运行WAVE扫描,要么用一个WAVE浏览器扩展直接在Chrome或Firefox润波。
  2. 选择对比在屏幕的左侧栏按钮。
  3. 旁边将出现由检波低对比度文本的每个实例的图标。
  4. 在侧栏或页面内点击一个图标来看看对比度此文在侧边栏。该颜色会出现在前景色背景颜色在边栏的字段,随后是对比度。
  5. 使用打火机每个字段下面选项,找到符合WCAG要求的颜色组合。
注意

WAVE无法检测所有的对比度问题。它不占背景图像,渐变,透明度等,还无法检测到文本,其为图像的一部分。这些类型的对比度问题的手动扫描仍然是必要的。

ColorZilla滴管

文本通常图像内显示,或在不属于固体彩色图像,渐变和其他背景。在这些情况下的对比测试需要使用“吸管”工具,可以让你选择的颜色出现在屏幕上的特定位置。ColorZilla是可用于流行的滴管火狐

在浏览器中安装ColorZilla后:

  1. 单击浏览器工具栏中出现的吸管图标(图标图标的屏幕截图)。十字线图标将出现。
  2. 上方居中的位置要选择颜色的十字星。
    Colorzilla被用来选择颜色
    点击和颜色值将被复制到剪贴板。
  3. 粘贴此颜色为对比检查或到WAVE对比工具。
小费

扩大网页有时可以更容易地选择具有吸管所需的颜色。使用按Ctrl(Windows)或命令(苹果机)和+关键在放大时,-键缩小,并0重新设置页面大小。

色彩对比分析

色彩对比分析或CCA,是Windows和MacOS一个可下载的程序,允许你在任何程序中测试对比。该软件允许你使用RGB,十六进制和HSL格式输入颜色,它支持alpha(透明度)测试的颜色。但是,它除了主要的功能是它能够使用滴管工具来测量屏幕上的任何对比度的能力。

要做到这一点,选择滴管前景色部分并使用滴管选择文本或前景色。如果背景是任何颜色除了白色之外,做的一样背景色吸管。如果颜色组合符合文本AA和AAA的要求以及对非文本内容WCAG 2.1 AA要求CCA会通知您。

CCA

CCA最大的优势也可能是其最大的弱点 - 它是从Web浏览器是分开的。如果评估是舒适挖掘到网页的HTML和CSS,它通常更有效地使用WAVE和Chrome DevTools检查对比度。但是CCA是一个很好的工具评价图片中的文字和评估的电子文档,如Word和PDF文件时,它真正的亮点。

注意

更早的版本,被称为“CCA经典”,也可供下载。新版本更精致的和有用的整体,但早期版本有几个显着的优点:

  • 更好的键盘辅助功能,其中包括使用箭头键使用颜色选择器的能力。这使得它更容易选择小面积的色彩,如文本字符。
  • 的能力,只是改变亮度或色彩的亮度。这是试图找到符合使用到本身的颜色变化越小WCAG对比度要求暗的阴影时的一个重要特征。为了实现这一目标,选择选项>显示颜色滑块>并检查HSV。然后使用向窗口的底部滑块变亮或变暗的颜色。
    CCA经典与值滑块突出

的Microsoft Office 365无障碍检查

微软Word无障碍检查报告低对比度文本的两个实例的屏幕截图

微软办公室最近开始确定其内置辅助功能检查中低对比度的文本。此功能目前仅在Office 365的Windows可用的,但它是一个值得欢迎的除了,希望能列入为Mac的Office未来的版本。

要检查在Word,PowerPoint和Excel低对比度文本,请选择评论选项卡>辅助检查。低对比度文本的检查结果被确定“难以阅读的文本对比”。

点击结果文档中直接跳转到该问题。

它计算文本和背景色彩,和它自动应用低3:1的对比度,以大的文本。然而,像其他工具,在图像的手动扫描文本,或在文本图像/梯度/等。仍然是必要的。

寻找自己的过程

有没有一个“最佳”的工具进行测试对比。您使用的工具,将依赖于被评估的内容和个人喜好。同样,没有一个单一的测试过程中,是最适合的所有内容。但是,大多数对比评估将包括至少三个“台阶”(但顺序可能会有所不同):

  1. 潜在的问题进行了初步扫描,如:
    1. 颜色的依赖(常见于链接和表单)
    2. 低对比度文本
    3. 文字图片
    4. 图形对象或用户界面组件,在WCAG 2.1所定义的
    5. 鼠标悬停和键盘焦点状态
  2. 如果可能的话,一个自动扫描使用WAVE或Microsoft Office辅助功能检查(仅在Office 365的Windows可用)。
  3. 的使用对比跳棋,ColorZilla,DevTools,色彩对比分析,或这些的任何组合的其它潜在问题手动测试。

评估对比度和色彩运用可能需要相当的时间和精力,但这个过程会随时间变得更加自然。您首选的工具和方法可能会随着经验改变,可能增长超出了本文中所介绍的,但应用的原则和步骤,在这篇文章中会提供什么是WCAG 2,如何需要测试它的一个坚实的基础。