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