不要依赖 WCAG 2 的对比度计算，试试 APCA

如何科学地评估「文字与背景的色彩组合能不能被看清楚」？

总结

背景

最佳实践

顾巍，Design Director，目前供职于小影。

最近更新：2022年9月

WCAG 2 现状

1.4.3 对比度（最低）(AA级）

文本和文本图像的视觉呈现具有至少 4.5:1 的对比度，但以下情况除外：

在搭建色彩系统时，通常我们会基于 WCAG 2 进行对比度检查，对比度数值越大越好。我们一般选择尽可能大于 4.5:1 的色彩组合用于正文，大于 3:1 的用于标题等。

比如我们选择了一套偏绿的色彩方案：

WCAG 2 example with 3.12:1 and 5.29:1

很不错，#51A24F用于大标题，对比度为3.12:1；#067C1F用于正文，对比度为5.29:1。都达到了WCAG 2 的 AA 级别要求。然而我们想搭配一个按钮的主背景色时，很遗憾的发现，原定的绿色#00AD16低于3:1，没有通过 WCAG 2 的要求。

WCAG 2 example with 2.96:1

而这套蓝色背景，粉色文字的方案对比度却大于4.5:1，得到了大标题 AAA、正文 AA 级别。这让我们怀疑 WCAG 2 对于对比度的计算是否有普适性。

WCAG 2 example with 4.5:1

问题在于 WCAG 2.x 使用了完全基于亮度的计算方式，本质上是较亮颜色的相对亮度（L1）比上较暗颜色的相对亮度（L2）：

Contrast = (L1 + 0.05)/(L2 + 0.05)

当一个房间里有20盏灯发光，在物理学上20盏灯发出的光通量的确是10盏灯的两倍，但人眼却只会感觉亮了一点。这是由于人眼的亮度感知并不是线性的，同时极易受到周边环境色彩的影响。

基于亮度的 WCAG 2 会过分夸大暗色的对比度权重，这一方面会否决一些实际上比较容易识别的色彩组合（左列样例），另一方面又会通过一些较难识别的（右列样例）*：

Some WCAG 2 fail and pass example

所以我们得出结论：

WCAG 2 的对比度数值所代表的可访问性并不均一，相似的对比度数值所带来的感受在某些条件下差别巨大。

更严重的是，这导致了许多产品在暗色模式下的色彩表现不佳，比如 Apple 在 iOS 的系统色盘中提供的「链接」蓝色与背景的 WCAG 2 对比度超过了 4.5:1，而实际感受的对比度要远远低于浅色模式。

A problem with apple color

介绍 APCA

有很多人发现了 WCAG 2 的对比度计算问题，但也有很多设计师认为对比度 AA/AAA 要求只是一个输出后的检查器，在设计过程中更多的还是要「对设计师自己的直觉足够自信」。

对于成熟的设计过程来说：

显然 WCAG 2 在两方面都存在缺陷，那么就有大佬忍不住了。

Andrew Somers 在好莱坞的电影和电视行业工作，主要担任剪辑、调色、视觉效果等职责，视力受损。他在2019年4月，于 W3C 的 GitHub 提出了对 WCAG 2 的挑战：

后来他作为 W3 的特邀专家成为了 WCAG 3 的共同作者之一，目前提出了 APCA 算法，在 WCAG 3.0 文本的视觉对比部分中作为候选方案。

可访问的感知对比度算法（Accessible Perceptual Contrast Algorithm，简称 APCA），基于字形属性、文本与背景的感知亮度差异、环境与上下文等特征进行对比度计算，目标是更接近人眼的实际感受。具体的技术细节不在此赘述，可参考 GitHub - Myndex/SAPC-APCA。

作为设计师可以直接使用 APCA 的相关工具，一般是选择前景文本色和背景色，返回一个感知亮度对比度数值 Lc，范围在-108 ~ +106，浅色背景为正数、深色背景为负数。

APCA Reference Chart

在实践中推荐的近似对应关系：

如果你的产品在法律或其他政策中对于 WCAG 2 有强制约束，请考虑在 APCA 的基础上向前兼容WCAG 2：

APCA 工具

【推荐】Figma 插件 - Visual Contrast

【推荐】Web - Contrast tools

类似的工具

Web - APCA 主导作者的工具

Web - BPCA

Chrome 89+ DevTools

How to set Apca on chrome

让我们对比 WCAG 2 与 APCA

接下来我们借用 Ant Design 的官方色板对比一下两者在实践中的情况。

在功能色部分 Ant 提供了 Link、Success、Warning、Error 在 Dark 和 Light 情况下的八对色值，让我们看看它们的对比度：

Ant Design Color

基于 WCAG 2，我们发现：

看来有值得修改的地方，可以改善色彩可访问性。

让我们先试试基于WCAG 2 的要求，满足 AA 的最低要求，让我们看看修改之后版本的表现：

Ant Design Color with WCAG 2

可以看到，在同样的背景环境下，WCAG 2 反映出的对比度还是比较一致的。主要问题出现在 Dark 与 Light 两种模式中，同样的对比度数值带来的亮度感受差异太大。

除此之外，WCAG 2 还难以应付复杂场景的挑战，比如不同灰度层级的，或是带有色彩背景的情况。

这里我们引入 APCA 的算法进行调整，先试一下对比度设置在45，满足最低要求：

Ant Design Color with APCA 45

或者希望满足较高的可访问性，也同时兼容 WCAG 2 的要求，将对比度设定在60：

Ant Design Color with APCA 60

可以看出，APCA 在更多场景中的表现更加稳定一致，而对应的 WCAG 2 的对比度数值差异巨大。

下一步

目前 WCAG 3.0 还没有发布，由于 APCA 只是其中一个候选方法，这将导致一定的不确定性。

考虑到标准的发布到广泛的应用还有非常长的时间，我迫不及待地推荐各位设计师尝试使用 APCA 去解决实际的色彩场景应用问题，特别是在暗色场景下。

不论是 WCAG 2 还是 APCA，这些都不是选择色彩的唯一标准。作为设计师，我们要在满足可访问性的基础上更好地探索色彩方案。

感谢阅读。

提问

如果你还不打算应用 APCA 来评估色彩可访问性，原因是什么？

资源

参考文章

APCA 推荐工具

WCAG 2 推荐工具

更新记录