工作经验分享检查网页配色是否符合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 颜色格式，选择自己习惯的格式即可。

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

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

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

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

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

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

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

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

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

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

值得一试的三个理由：

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