5G网络需要一种新的运营方式

由图中可以看出， iOS规范直接在纯黑色背景层上使用了纯白文字，将颜色对比度拉到了出人意料的最大值。这似乎和我们之前的常规认识有点不同：就像我们在设计浅色模式时，在白色背景下不会使用纯黑文字;在黑色背景下也不会使用纯白色字体。

这或许是因为苹果在推出深色模式之初，所希望打造的就是一个不论在白天和夜晚都可以使用的色彩模式，而不是仅为弱光环境打造的「夜间模式」。它需要同时兼容不同光线情况下人眼对于光线的捕捉，从这一点上来讲，深色模式的设计会比夜间模式更难，不是单纯的降低对比度就可以的。
 

但仅凭设计师的经验进行判断当然是不现实的。于是乎业界便诞生了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这样的数据是怎么来的。毕竟通过官方给出的公式，已经足够用于计算颜色对比度了。通过我前期的调研，这些数据的来源结合了色系坐标系、矩阵运算等等一系列的演变…特别感兴趣可以去查查，篇幅原因我就不在此做过多赘述了。

根据上面的例子，我们不但知道了如何计算两个颜色的对比度，同时也得出了： 颜色中对比度的最大值为21:1(纯黑与纯白)的结论。

对比度工具及实例验证

上面如此复杂的公式，确实不可能每一次都通过手动计算去得到对比度…好在现在已经有许多在线工具已经可以辅助我们完成对比度校验的工作了，比如有类似 WebAIM’s Color Contrast Checker 这样的单色对比度工具，或者类似 EightShapes Contrast Grid 这样的色组对比度工具。

（编辑：怀化站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!