三种工具和技术概览，用于测试和验证设计的无障碍色彩对比度。
假设您在浅色背景上有一些文字，如下所示：
虽然您可能可以阅读所有示例，但并非所有人都能做到。
无障碍色彩对比度是一种确保所有人都能阅读文本的做法。有时测试对比度很简单，有时却非常困难。阅读完本文后，您将掌握三种新的工具和技术，用于检查、更正和验证网页设计对比度，从而应对最棘手的场景。
WCAG 和颜色对比度
W3C 的无障碍网页倡议提供了策略、标准和资源，以确保尽可能多的人能够访问互联网。这些标准背后的指南称为《Web 内容无障碍指南》(WCAG)。最新的稳定版本 WCAG 2.1 涵盖了一项重要的无障碍要求：最低对比度。
WCAG 2.1 中两种颜色之间的关系通过其对比度（即比较两种颜色的亮度时得到的数字）来描述。亮度用于描述颜色与黑色 (0%) 或白色 (100%) 的接近程度。WCAG 围绕对比度需要达到多少才能使网站可供访问定义了一些规则和计算算法。不过，此计算存在已知问题。最终，我们将采用更可靠的方法，但目前，WCAG 是我们能找到的最佳方法。
规则是什么？
对比度越高，得分越高，例如 4.5 或 7，而不是 3。如需进一步熟悉评分表，请参阅 Polypane 的对比度检查器。
测试颜色之间的对比度
现在，我们已经知道要寻找什么，那么该如何测试呢？以下是三款免费工具，可帮助您检查、更正和衡量网站的对比度。我们将概述每种方法的优缺点，以便您能够自信地通过多种方式测试网站颜色和内容的可访问性。
- Pika
一款 MacOS 应用，能够显示整个屏幕上任何颜色、渐变色、透明色等的对比度。 意图明确，用户手动选择要比较的 Pixel 手机。自动化程度略有降低，但功能大幅增强。 - VisBug
一款跨浏览器扩展程序，能够同时显示多个对比度叠加层，但与开发者工具一样，有时无法检测到意图。 - Chrome 开发者工具
开发者工具内置于 Chrome 中，提供了各种检查、更正和调试颜色问题的方法，但在检查渐变和半透明颜色时存在缺陷，有时无法检测到意图。
Pika（macOS 应用）
如果开发者工具或 VisBug 无法正确评估对比度（例如，当您需要测试浏览器之外的颜色时，或者涉及透明度或渐变时），那么 Pika 就能派上用场。Pika 可以访问屏幕上的每个像素，因为它是一个系统工具，而不是一个 Web 工具。
这也意味着，使用 Pika 的用户体验与 DevTools 或 VisBug 不同。 开发者工具和 VisBug 会尽力显示浏览器 DOM 中的文本和背景颜色，而 Pika 比较的颜色是从屏幕上的任意点手动选择的。这让 Pika 拥有了更多控制权，并开辟了一些额外的应用场景：
- 比较任意两种颜色，无论它们是否在浏览器中。只要您能在屏幕上看到，就可以进行测试。
- 比较具有透明度的颜色。
- 比较渐变中的颜色。
- 比较使用混合模式（例如 CSS 中的 mix-blend-mode）的颜色。
比较任意两种颜色
比较文本与背景颜色：
比较矢量图形的描边颜色和填充颜色：
比较具有透明度的颜色
将文本颜色与各种背景样本像素进行比较。在这里，磨砂玻璃效果中最浅的灰色用作背景对比色。
比较颜色与渐变
比较渐变色或图片上的文字。在这里，我们将“Lasso”中的 L 与图片的浅蓝色进行对比：
VisBug
VisBug 是一款受 FireBug 启发的工具，可供设计师和开发者直观地检查、调试和体验其网站设计。通过模拟人们熟悉并喜欢使用的设计工具的界面和用户体验，它的进入门槛比 Chrome 开发者工具更低。
试用 VisBug 或在 Chrome、Firefox、Edge、Brave 或 Safari 上安装。
其提供的工具之一是无障碍检查工具。
跨浏览器（甚至在移动设备上）进行检查
点击“无障碍功能检查”工具后，用户指向或通过键盘导航到的任何内容都会在提示中显示其无障碍功能信息。此提示包含检测到的前景色和背景色之间的颜色对比。
检查一个或多个
开发者工具可以查看单个颜色配对，也可以获取页面中所有颜色配对的报告，但 VisBug 允许使用多个颜色配对，从而提供了一个很好的折衷方案。点击某个元素，提示便会固定显示。按住 Shift 键并继续点击其他元素，所有提示都会保持原位：
这对于基于组件的设计尤为重要，因为组件的多个部分都需要通过对比度得分。此方法可让您一次性查看所有这些组件。也非常适合设计审核。
Chrome DevTools
如果您已安装 Chrome，那么您已经拥有许多对比度测试工具：
Chrome 开发者工具颜色选择器
在 Chrome 开发者工具的“元素”面板的“样式”窗格中，颜色值旁边会有一个小小的方形色板。点击此色板后，您会看到颜色选择器工具。如果可能，该工具的中间部分会显示颜色与前景或背景的对比度。
在以下示例中，颜色选择器已打开，用于选择自定义属性颜色值。对比度得分显示为 15.79，并带有两个绿色对勾标记，表示该得分符合 AA 和 AAA WCAG 2.1 要求：
颜色选择器自动更正
在选择颜色时查看分数非常方便，但 Chrome 开发者工具还提供了自动更正功能。当颜色选择器报告无障碍色彩对比度得分不合格时，可以将其展开以显示 AA 和 AAA 得分目标，以及滴管工具。 AA 和 AAA 旁边是色板和刷新图标，点击该图标即可为您找到最接近的合格颜色：
如果您对颜色不挑剔，自动校正功能是满足无障碍指南要求的好方法，无需花费太多精力即可完成任务。
检查提示
元素选择工具在页面悬停期间具有一项特殊功能，可报告常规字体、颜色和无障碍信息。元素选择工具是以下屏幕截图中左侧的图标。即右下角带有箭头光标的方框。也可以使用快捷键 Control+Shift+C（在 macOS 上为 Command+Shift+C）进行选择。
激活后，该图标将变为蓝色，指向页面中的任何内容都会显示以下快速检查提示：
与颜色选择器工具不同，该工具不需要您在“样式”窗格中找到色板，只需在页面上指向相应位置即可查看对比度得分。与颜色选择器一样，它一次只能显示一个对比度得分。
Bump bump 'til you pass 🎶
我经常使用这个快速检查工具检查颜色搭配，发现它刚好达不到要求的对比度。我没有使用颜色选择器的自动更正功能（因为我很挑剔），而是在 CSS 中微调颜色通道，并观察直到达到所需的对比度。我将此过程称为“bump bump til you pass”（不断调整，直到通过），因为我会不断调整颜色通道数值，直到它们通过 WCAG 2.1。
具体步骤如下，且必须严格按照顺序执行：
- 在“样式”面板中，将键盘焦点设置在某个颜色上。
- 使用键盘快捷键
Control+Shift+C（在 MacOS 上为Command+Shift+C）激活检查元素工具。 - 将光标指向目标。
- 按键盘上的向上/向下键可更改颜色值中的数字。
之所以能这样做，是因为 CSS 样式值仍具有键盘焦点，而鼠标可让您指向目标。请确保不要点击目标，否则焦点会从颜色值区域移开，并且在重新聚焦之前，您将无法再微调值。
CSS 概览
到目前为止，Chrome 开发者工具提供了每次查看一种颜色配对的方法，但 CSS 概览可以抓取整个网页，并一次性显示所有无法访问的配对：
如需详细了解此功能，请参阅这篇博文 CSS 概览：确定潜在的 CSS 改进，或在 YouTube 上观看 Jecelyn Yeen 的开发者工具提示系列视频，了解如何使用 CSS 概览面板确定潜在的 CSS 改进。
灯塔
Lighthouse 是 Chrome 开发者工具中的另一款审核工具。它可以抓取您的网页，并报告不符合无障碍要求的颜色搭配。它会显示每种颜色搭配的小屏幕截图，供您查看通过和未通过的情况。任何失败的组合都会对您的 Lighthouse 得分产生负面影响。
这些结果可能如下所示：
JS 控制台
也许到目前为止列出的所有工具都不在您所在的位置。也许您（整天）都在使用 JavaScript。不妨尝试以下实验。 在您构建应用时，控制台的“问题”窗格可以持续报告任何颜色对比度无障碍问题。在“设置”>“实验”中启用该功能，如下所示：
然后打开“问题”窗格，看看是否发现了任何问题。如果确实如此，它们可能如下所示：
色盲模拟
在讨论颜色对比度和确保无障碍颜色搭配时，值得指出的是视觉缺陷模拟工具。这会更改设计的颜色或外观，以展示不同类型色盲的结果，让您有机会修改设计，使颜色不再是用户体验与用户沟通的唯一方式。
仅使用颜色来描述信息（例如用红色表示不好，用绿色表示好）并不是一种安全的无障碍做法。有些人无法正常分辨绿色或红色，此模拟工具将帮助您体验和记住这一点。
颜色对比度系统偏好设置模拟
越来越多的用户在操作系统中更改对比度设置，以便在界面中请求更少或更多对比度个性化设置。CSS 可以利用此设置，就像利用浅色或深色主题偏好设置一样。Chrome 开发者工具能够模拟此偏好设置，以便设计人员可以测试和适应用户请求，而无需从系统切换设置。
试用 WCAG 3.0 APCA
您可以尝试的另一项实验是使用实验性 APCA 颜色比率评分系统测试颜色配对。该功能可通过“设置”>“实验”启用，它将 WCAG 2.1 比率系统替换为更新、更先进的对比度检查器算法，让您可以在该提案逐步成为标准的过程中预览其结果。
启用后，使用点检查提示或颜色选择器查看颜色配对得分，并查看其是否通过：
总结
色彩对比度是实现网络无障碍的重要一环，遵循这一原则可让网络在各种情况下都能为尽可能多的人提供更好的使用体验。希望这三个工具能帮助您 做出出色的颜色选择