颜色对比度怎么选？来看这份大厂公认的标准规范！

我猜在你踏入设计这个圈子的时候，一定有被推荐过 Robin Williams 的《写给大家看的设计书》。复杂的设计原理在书中被凝炼为亲密性、对齐、重复和对比四个基本原则。

但其实我今天要说到的内容和这本书的关系不大...我只是想引出「对比」这个概念，在设计中有多么基础且重要。

Google Design 对于文本框可用性研究的主要发现，其中有一条是： 文本框的底部线条与背景的颜色对比度最小应为3：1。因为有足够的颜色对比才能够让控件在场景中具有更高的易见性。

但你是否真的了解颜色对比度的概念？这个值为什么是 「3：1」，又应该怎么得到「3：1」？颜色对比度对我们在设计过程有什么影响，能起到什么作用？

这个问题其实很容易解答。在硬件设备制造商繁多的当下，产品设计者其实是无法确保每一个用户在使用你的产品时，所看到的界面和设计师在显示器上看起来的一样完美。

总会有用户使用的是显示性能较差的设备。甚至你需要考虑的还不仅仅是设备因素，产品的使用环境（室外或昏暗室内）、主流用户群体的视力情况等等，都可能要求你做到更加无障碍的视觉体验。 否则很可能在真实的使用场景中，你的产品几乎没法使用...

但仅凭设计师的经验进行判断当然是不现实的。于是乎业界便诞生了WCAG（Web Content Accessibility Guideline，Web内容无障碍指南）标准。 虽然该标准是为了满足有视觉障碍用户的视觉体验，但满足该标准后，同样也能帮助普通用户更方便地使用。

实际上WCAG中还包含了许多无障碍设计标准条例，从视力、听力、运动和智力等诸多方面指导产品设计者做出更加易于使用的产品。但今天我主要提炼出「颜色对比度无障碍标准」这一项来说一说。

通过阅读性能评估，色相和饱和度对可读性的影响其实很小，甚至没有。真正影响阅读性能的其实是颜色明度造成的颜色对比度。

WCAG颜色对比度标准定义的目的是让文本和背景之间存在足够的对比度，确保绝大范围视力程度的人群都易于阅读。也就是说，符合WCAG该标准的文字或图像，将有足够高的色彩对比度，使之很容易地从背景中被辨识出来。

WCAG制定了两条标准条例，分别是「1.4.3条例：对比度（最小）标准」（即AA标准）和「1.4.6条例：对比度（加强）标准」（即AAA标准）。AAA标准比AA标准要更加严苛，适合视觉要求更严格的产品类型。两条标准的定义分别为：

1.4.3 对比度（最小）: 普通文本的视觉呈现与背景至少要有 4.5:1 的对比度，大文本¹与背景至少有 3:1 的对比度。

1.4.6 对比度（加强）: 普通文本的视觉呈现与背景至少有 7:1 的对比度，大文本¹与背景至少有 4.5:1 的对比度。

备注：¹大文本：WCAG规定 「≥18pt常规字重」的文本或 「≥14pt字重加粗」的文本为大文本。

我们在 iOS人机交互规范 和 Material Design 指导规范中，可以看到有许多颜色对比度指标都是履行WCAG标准的。

例如：我们前面说到的「文本框的底部线条与背景的颜色对比度最小应为3：1」，以及MD规范中暗黑模式下「明度对比至少4.5：1」。这些数据，均是来自WCAG标准。

（温馨提示：数学不好的朋友...可以直接跳到下一节使用便捷工具...）

了解了数据指标后，我们就该探索颜色的对比度是如何计算得出的了。该公式可以在WCAG标准中可以找到：

其中 R, G , B 取值为： 若 XsRGB

欢迎大家关注作者微信公众号：「UCD耍家」

优秀设计师

复制本文链接 文章为作者独立观点不代表优设网立场，未经允许不得转载。