Color review 检查网页配色是否符合 WCAG 规範

前几天写了一篇「Colour Contrast Analyser 色彩对比分析器检查易读性和视觉对比度」工具教程，也协助我找到更适合且符合 WCAG（网页无障碍性指导原则）规範的颜色，简单来说就是前景色和背景色需要达到一定的对比度才能在阅读时更轻松，而且也能符合各类使用者需求，在测试工具中会有对于网站无障碍项目评分，其中可能很多人遇到的问题是颜色对比度不够高，我们就能透过色彩工具来解决问题。

本文要推荐「Color.review」是用来计算两种颜色对比度、检查是否符合 WCAG 2.1 规範的在线工具，也能协助使用者找出看起来好看、又适合每个人的色彩组合，相较于 CCA 来说 Color.review 无需下载软件或应用程序、直接以浏览器开启就能使用，产生对应的分享链结来将检测结果提供给其他人参考。

Color.review 使用 RGB、HSL、CMYK 和 CSS 格式置入颜色，还有一篇带有标题、内文加上图片的示例文章用来预览配色，除了显示两个颜色计算后的对比度数值还能找出符合 WCAG 规範的颜色（后面内文详细说明）。

Color.review
https://color.review/

使用教程

STEP 1

开启 Color.review 网站后会有预设颜色，主要是从右侧调整前景、背景色，检查上方显示的内文、标题是否有符合 WCAG 规範的对比度，最好是能设定到两个数值都绿色 AAA，不行的话也至少要让两个数值都显示为绿色（对比度 4.5 以上）。

右上角会有 RGB、HSL、CMYK 或 CSS 颜色格式，选择自己习惯的格式即可。

STEP 2

举例来说，我设定前景、背景色后左上角显示的对比度为 4.1，再从上方看到文字部分没有通过 WCAG 2.1 规範，显示为红色的 FAIL，在这样的配色情况可能会导致内文不容易阅读（不过标题因字体较大就没影响）。

往下捲动网页会看到前景、背景色实际套用在一篇文章或图案上的效果，左侧还会显示有无符合 WCAG 2.1 以及评分为 AA 或是 AAA ，可以看到在这个配色时只有标题有通过，内文部分则是连 AA 评级都没有达到。

STEP 3

那么要怎么利用 Color.review 来调整到符合 WCAG 2.1 规範的对比度呢？

有看到调色盘里面有三条线吗？分别对应到不同的对比度，例如下图由上而下分别为 3、4.5 和 7，只要将颜色调整到 4.5 – 7 之间就能让内文及标题的评级达到绿色通过（如果需要两者都达到 AAA 评级，就要将颜色拉到最下方那条线才有足够的对比度）。

微调后对比度提高到 4.5，也就符合 WCAG 2.1 对比度（内文为 AA、标题 AAA），看起来也和原本颜色相去不远，如果你想要调整网页颜色，让它可以让一般使用者顺利阅读，其实花点时间微调配色相当重要喔！

值得一试的三个理由：

1. 在线色彩对比度测试工具，检查是否符合 WCAG 2.1 规範
2. 设定前景色、背景色后套用到示例文章查看标题和内文样式
3. 显示对比 3、4.5 和 7 的颜色，协助使用者找出更适合的配色组合