编辑导语：我们在利用手机和电脑时，恒久的利用会让我们眼睛感想疲惫，所以一个柔和的舒适的画面很重要；好比手机和电脑的屏幕可以配置夜间模式，在晚上看手机可以舒缓一点；本文作者对配色中的颜色比拟度做出了阐明，我们一起来看一下。

我猜在你踏入设计这个圈子的时候，必然有被推荐过 Robin Williams 的《写给各人看的设计书》——巨大的设计道理在书中被凝炼为亲密性、对齐、反复和比拟四个根基原则。

但其实我本日要说到的内容和这本书的干系不大，我只是想引出「比拟」这个观念，在设计中有何等基本且重要。

前面我在《Google 用户研究：文本框设计原则》中提到过，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尺度中可以找到：

比拟度 = （L1 + 0.05）/（L2 + 0.05）「个中：L指颜色的相对亮度」

相对亮度L = 0.2126 * R + 0.7152 * G + 0.0722 * B

个中 R, G , B 取值为：若 XsRGB <= 0.03928 则 X = XsRGB/12.92 ；不然 X = ((XsRGB+0.055)/1.055) ^ 2.4

XsRGB 在此指代 RsRGB, GsRGB, 或 BsRGB，取值为 XsRGB = X8bit/255 「X8bit 指R、G、B通道各自在8位/通道下 0-255 的取值」。

我发起不消过多地去纠结公式底层的逻辑，好比0.2126这样的数据是怎么来的。