检查网页配色是否符合WCAG规范的神器「Color review」

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

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

Color.review

网站链接：https://color.review/

使用教学

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

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

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

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

那么要怎么利用 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 的颜色，协助使用者找出更适合的配色组合