Colour Contrast Analyser 色彩对比分析器检查易读性和视觉对比度

如果网站管理者想检查网页的各项表现，Chrome 浏览器开发人员工具内建「Lighthouse」前端稽核工具很有用，透过 Lighthouse 可检查网页性能、SEO、最佳做法或无障碍评分，有助于改善网页用户体验，发掘一些可能没有被注意到的潜在问题。例如无障碍检查可以找出网页的无障碍相关提示或问题，包含各项属性有没有被正确设定或颜色部分有没有足够的对比度。

刚好我在检查网站时发现「背景色和前景色没有足够的对比度」问题，这在许多网页都可能出现类似情况，简单来说，背景和文字颜色需要有超过一定程度的对比才不会对阅读造成障碍，试想当文字与背景颜色太过接近时会有难以阅读的问题，影响阅读理解程度、降低阅读速度，尤其对视力不佳或是色盲的使用者来说更是明显。

依照 Google Web.dev 说明找到「色彩对比分析器」（Colour Contrast Analyser）免费工具，这个工具来自 TPGi，也是开放原始码专案，有 Windows 和 macOS 两种版本可下载，在 CCA 输入前景色和背景色就能快速计算出两色彩的对比度，以及是否符合 WCAG 2.1（网页无障碍性指导原则）规範，协助开发者建立出符合无障碍要求的网页。

我还介绍过其他和 WCAG 相关的色彩工具：

• Colorable 网页色彩在线产生器，可产生符合 WCAG 规範配色组合
• Koa11y 检测网页有无符合网页亲和力 A11y 各项指标和最佳化建议
• Who Can Use 检查网页配色对视力障碍使用者友善程度
• Hex Naw 检测你的网站配色对比和可视性评分，找出最具网页亲和力色彩组合

Colour Contrast Analyser（CCA）
https://www.tpgi.com/color-contrast-checker/

使用教程

STEP 1

开启 TPGi 的 Colour Contrast Analyser 页面从下方找到 Windows、Mac 版下载链结。

STEP 2

开启后 Colour Contrast Analyser 会有前景色（Foreground colour）和背景色（Background colour）两个选项，只要调整这两个颜色，下方就会显示 WCAG 2.1 检测结果是否通过。

STEP 3

输入颜色除了 HEX 色码还有 HEXa、RGB、RGBa、HSL、HSLa、HSV 和 HSVa 格式。

也能使用滴管工具选取萤幕上的特定颜色。

STEP 4

如果想微调一下颜色来通过 WCAG AA 或 AAA 规範的对比值，可点选颜色右下角「调整」开启色彩功能，勾选「Synchronize colour values」后将数值慢慢调升或调降，找出和原色彩相差不远的颜色（但可能就会符合无障碍的色彩对比值）。

在调整颜色时可从「Sample preview」预览效果，包括一段示例文字和图示，下方的 WCAG 2.1 结果右侧就会即时计算这两个颜色搭配后的对比值，下方的 AA 和 AAA 就是无障碍检测结果，建议尽量将颜色调整到出现绿色通过。

STEP 5

至于 AA 和 AAA 规範的色彩对比也有一般文字大小、较大文字的差异，举例来说，WCAG AA 的一般文字大小需要色彩对比 4.5:1 以上才算通过，如果是较大的文字（18pt /24px）或是粗体时只要有 3:1 即可，点选下方展开说明，开发者可依照说明提供的数据进行色彩微调。

值得一试的三个理由：

1. Colour Contrast Analyser（CCA）用来分析色彩是否通过 WCAG 规範
2. 开放原始码专案，提供 Windows、Mac 两种版本免费下载
3. 可测试配色组合有无通过 WCAG AA、AAA 要求的色彩对比度