测试网页设计颜色对比度

概述用于测试和验证设计中无障碍颜色对比度的三种工具和技术。

Adam Argyle
Charlie Gleason

假设您在浅色背景上有一些文字，例如这样

The phrase 'The quick brown fox jumps over the lazy dog again' is shown, where each word or couple of words are a lighter blue. Above each section of progressively faded words is their contrast ratio score. The last few words are very difficult to read because of low contrast.

虽然所有示例对您来说可能都可读，但并非每个人都是如此。

无障碍颜色对比度是一种实践，可确保每个人都能阅读文本。有时测试对比度很容易，有时则非常困难。在本文结束时，您将掌握三种新工具和技术，用于检查、纠正和验证您的网页设计对比度，以便您可以应对最困难的情况。

WCAG 和颜色对比度

W3C 的 Web 无障碍倡议组织提供策略、标准和资源，以确保尽可能多的人可以访问互联网。支持这些标准的指南称为 Web 内容无障碍指南 (WCAG)。最新的稳定版本 WCAG 2.1 涵盖了一项重要的无障碍功能要求：最低对比度。

WCAG 2.1 中两种颜色之间的关系通过它们的对比度来描述，即比较两种颜色的亮度时得到的数字。亮度是一种描述颜色接近黑色 (0%) 或白色 (100%) 程度的方式。WCAG 定义了一些关于对比度需要达到多少才能使 Web 具有无障碍功能的规则和计算算法。不过，此计算存在已知问题。最终将采用更可靠的方法，但目前 WCAG 是我们拥有的最好的方法。

规则是什么？

AA AAA
正文文本（< 24 像素） 4.5 7
大文本（> 24 像素） 3 4.5
UI（图标、图表等） 3 未定义

更高的对比度比率得分更高，例如 4.5 或 7 而不是 3。要更熟悉评分表，请查看 Polypane 的对比度检查器。

Text is shown over purple: one pairing is black text over purple and the other is white text over purple.
您觉得哪种颜色配对对比度更高？

测试颜色之间的对比度

因此，既然我们知道要寻找什么，我们该如何测试呢？这里有三种免费工具可以帮助您检查、纠正和测量您网站的对比度。每种工具的优点和缺点都将概述，以便您可以自信地以多种方式测试您网站的颜色和内容的无障碍功能。

  1. Pika
    一款 MacOS 应用程序，独特地能够显示整个屏幕上任何颜色的对比度、渐变色、透明色等等。意图是明确的，用户手动选择要比较的像素。自动化程度稍低，但功能增益巨大。
  2. VisBug
    一款跨浏览器扩展程序，独特地能够一次显示多个对比度叠加层，但与 DevTools 一样，有时无法检测意图。
  3. Chrome DevTools
    DevTools 内置于 Chrome 中，并包含多种检查、纠正和调试颜色问题的方法，但在检查渐变色和半透明颜色时存在缺点，并且有时无法检测意图。

Pika (macOS 应用程序)

如果 DevTools 或 VisBug 无法正确评估对比度，例如当您需要测试浏览器外部的颜色，或者涉及透明度或渐变时，那么 Pika 就能派上用场。Pika 可以访问屏幕上的每个像素，因为它是一个系统工具，而不是 Web 工具。

下载 Pika

这也意味着使用 Pika 的 UX 与 DevTools 或 VisBug 不同。DevTools 和 VisBug 尽最大努力从浏览器 DOM 显示文本和背景颜色，而 Pika 比较的颜色是从屏幕上的任何点手动选择的。这使 Pika 具有更多控制权，并开辟了一些额外的用例

  • 比较任何两种颜色，无论它们是否在浏览器中 — 如果您可以在屏幕上看到它，您就可以测试它。
  • 比较具有透明度的颜色。
  • 比较渐变色中的颜色。
  • 比较使用混合模式的颜色，例如 CSS 中的 mix-blend-mode。

比较任何两种颜色

将文本与背景颜色进行比较

Two grays are compared in a side by side, they have a contrast ratio of 13.01 and is passing AA and AAA targets.

比较矢量图形的描边和填充颜色

Two purples are compared from a duo-toned icon, they have a contrast ratio of 1.63 and are not passing any WCAG targets.

比较具有透明度的颜色

将文本颜色与各种背景样本像素进行比较。在这里，磨砂玻璃效果中最浅的灰色用作背景比较颜色。

Two colors that look like gray but are actually very desaturated purples are compared from an image with a blurry semi-transparent caption, they have a contrast ratio of 4.65 and are passing the AA target.

比较渐变色

比较渐变色或图像上的文本。在这里，将“Lasso”中的 L 与图像的浅蓝色进行比较

A screenshot from a TV show has the show title overtop, the L is white and the blue behind it are compared. They have a contrast ratio of 8 and are passing the AA and AAA targets.

VisBug

VisBug 是一款受 FireBug 启发的工具，供设计师和开发人员直观地检查、调试和玩转他们的网站设计。它的目的在于通过模拟人们已经熟悉和喜爱使用的设计工具的 UI 和 UX，从而降低入门门槛，使其低于 Chrome DevTools。

试用 VisBug 或安装在 Chrome、Firefox、Edge、Brave 或 Safari 上。

其工具产品之一是“无障碍功能检查”工具。

Screenshot of the VisBug toolbar on the left side of a blank page, the accessibility tool icon is pink and a popover is shown that provides instruction of the tool.

跨浏览器检查（甚至在移动设备上）

单击“无障碍功能检查”工具后，用户指向或键盘导航到的任何内容都会在其工具提示中报告其无障碍功能信息。此工具提示包括已发现的前景颜色和背景颜色之间的颜色比较。

A component with a title and an icon are shown with a pink bounding box around it, a VisBug accessibility tooltip points to the pink box with a color comparison report of the text color and it's background. The ratio is 13.86 and is passing both AA and AAA targets.

检查一个或多个

DevTools 可以查看单个颜色配对，也可以获取页面中所有颜色配对的报告，但 VisBug 通过允许多个颜色配对提供了很好的中间方案。单击一个元素，工具提示将保持原位。按住 Shift 键并继续单击其他元素，所有工具提示都将保持原位

A list of links on a webpage are shown with multiple VisBug accessibility overlays, each contextually pointing to and reporting the discovered text and background color contrasts.

这对于基于组件的设计尤为重要，在基于组件的设计中，组件的多个部分需要通过对比度比率评分。这种方法可以一次查看所有这些组件部分。也非常适合设计评审。

Chrome DevTools

如果您安装了 Chrome，那么您已经配备了许多对比度测试工具

Chrome DevTools 颜色选择器

在“元素”面板的 Chrome DevTools “样式”窗格中，颜色值旁边会有一个小的可视方形颜色样本。单击此样本时，您将看到颜色选择器工具。如果可能，该工具的中间将显示颜色相对于前景或背景的对比度。

在以下示例中，颜色选择器针对自定义属性颜色值打开。对比度比率得分报告为 15.79，并且有两个绿色复选标记，表明该得分通过了 AA 和 AAA WCAG 2.1 要求

Screenshot of DevTools Elements panel, in the styles the color picker is shown and in the middle is reporting the contrast ratio of the color of 4.98.

颜色选择器自动更正

在选择颜色时看到分数很方便，但 Chrome DevTools 还有一个自动更正功能。当颜色选择器报告无障碍颜色对比度得分失败时，可以展开它以显示 AA 和 AAA 得分目标，以及一个 取色器 工具。AA 和 AAA 旁边是样本和一个刷新图标，单击该图标将为您找到最接近的合格颜色

如果您对颜色不太挑剔，则自动更正功能是满足无障碍功能指南的好方法，而且无需付出太多努力即可完成任务。

检查工具提示

元素选择工具在页面悬停期间具有一项特殊功能，可以报告常规字体、颜色和无障碍功能信息。元素选择工具是以下屏幕截图中左侧的图标。它是底部右角带有箭头光标的框。也可以使用热键 Control+Shift+C（或 MacOS 上的 Command+Shift+C）来选择它。

Screenshot of the box and arrow icon in DevTools that invokes the element select tool.

激活后，图标将变为蓝色，指向页面中的任何内容将显示以下快速检查工具提示

A screenshot of an overlay very similar to VisBug, it shows some style information and an accessibility section that shows a contrast score of 15.79 that passes the AA target.

此工具无需使用颜色选择器工具在“样式”窗格中查找颜色样本，而是让您只需在页面周围指向即可查看对比度得分。与颜色选择器一样，它一次只能显示一个对比度得分。

碰撞碰撞直到通过 🎶

我经常使用此快速检查工具检查颜色配对，发现它仅略低于通过所需比率。我没有使用颜色选择器的自动更正功能（因为我很挑剔），而是在 CSS 中微调颜色通道，并观察直到通过我需要的比率。我将此过程称为“碰撞碰撞直到通过”，因为我一直在碰撞颜色通道号，直到它们通过 WCAG 2.1。

步骤如下，并且必须按确切的顺序完成

  1. 将键盘焦点设置在“样式”面板中的颜色内。
  2. 使用键盘快捷键 Control+Shift+C（或 MacOS 上的 Command+Shift+C）激活元素检查工具。
  3. 指向目标。
  4. 按键盘上的向上/向下键更改颜色值中的数字。

这样做有效的原因是 CSS 样式值仍然具有您的键盘焦点，而鼠标允许您指向目标。确保不要单击您的目标，否则焦点将从颜色值区域移开，并且在重新聚焦之前不会让您再微调值。

CSS 概览

到目前为止，Chrome DevTools 提供了每次查看一个颜色配对的方法，但 CSS 概览可以抓取您的整个页面并一次呈现所有不可访问的配对

Screenshot of the Overview Summary from running the CSS Overview capture tool. It shows 7 contrast issues, showing the discovered color pairings and their failing results.

在这篇文章 CSS 概览：识别潜在的 CSS 改进 中阅读有关此功能的更多信息，或者在 YouTube 上观看 Jecelyn Yeen 的 DevTools 技巧系列，教您如何使用 CSS 概览面板识别潜在的 CSS 改进。

Lighthouse

Lighthouse 是 Chrome DevTools 中的另一个审核工具。它可以抓取您的页面并报告不可访问的颜色配对。它包含每个颜色配对的微型屏幕截图供您查看，包括通过和失败的配对。任何失败的组合都会对您的 Lighthouse 分数产生负面影响。

以下是这些结果的样子

A screenshot of a Lighthouse evaluation, showing results of low-contrast text of the color combinations of 2 words.

JS 控制台

也许到目前为止列出的所有工具都不适合您。也许您（整天）都在使用 JavaScript。 这是一个可以尝试的实验。控制台的“问题”窗格可以在您构建时不断报告任何颜色对比度无障碍功能问题。在“设置”>“实验”中启用该功能，如下所示

Screenshot of an enabled checkbox: 'Enable automatic contrast issue reporting via the Issues panel.'

然后打开“问题”窗格，看看它是否发现了任何问题。如果发现了，它们可能看起来像这样

Screenshot of the Issues panel inside the Console, it reports 6 errors around contrast.

色盲模拟

在讨论颜色对比度和确保无障碍颜色配对的同时，值得指出的是视觉缺陷模拟工具。这将更改设计的颜色或外观，以演示不同类型的色盲结果，让您有机会修改设计，使颜色不是 UX 与用户沟通的唯一方式。

Screenshot of the options in the emulation DevTools for emulating vision deficiencies: no emulation, blurred vision, protanopia, deuteranopia, tritanopia, achromatopsia.

仅使用颜色来描绘信息（例如红色表示坏，绿色表示好）不是安全的无障碍功能实践。有些人看到的绿色或红色不一样，此模拟工具将帮助您体验并记住这一点。

颜色对比度系统首选项模拟

越来越多的用户正在更改其操作系统中的对比度设置，使他们能够要求在 UI 中减少或增加对比度个性化。CSS 可以利用此设置，就像它可以利用浅色或深色主题首选项一样。Chrome DevTools 提供了模拟此首选项的功能，因此设计可以测试并适应用户请求，而无需从系统中切换设置。

Screenshot of the options in the emulation DevTools for emulating the CSS media query prefers-contrast: no emulation, more, less, custom.

试用 WCAG 3.0 APCA

另一个可以尝试的实验是使用实验性的 APCA 颜色比率评分系统测试您的颜色配对。通过“设置”>“实验”启用后，它将 WCAG 2.1 比率系统替换为更新、改进的对比度检查器算法，让您可以在提案朝着标准努力时预览其结果。

Screenshot of an enabled checkbox: 'Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines.'

启用后，使用点检查工具提示或颜色选择器查看颜色配对得分，并查看它是否通过

Devtools inspect element tooltip is showing -100.2% for the contrast score on a dd element.

结论

颜色对比度是 Web 无障碍功能难题的重要组成部分，遵守颜色对比度使 Web 在最广泛的情况下对最多的人来说更易于使用。希望这三种工具能帮助您感到有能力做出出色的颜色选择。