超强干货！如何更加科学地提高文本可读性？(2)

如何计算对比度

相对亮度定义

了解对比度首先要知道相对亮度（relative luminance）的概念：相对亮度表达的是单位面积内光线通过的数量。在一个色彩空间内，最暗到最亮的点相对亮度取值范围为 0-1（这种取值方法很常见，比如摄氏度取值范围是规定标准大气压下冰水混合物到沸水温度的取值范围为 1℃-100℃），拿我们日常设计工作中接触最多的色彩空间 sRGB 举例，相对亮度的计算方式为 L = 0.2126 * R + 0.7152 * G + 0.0722 * B （此公式为理论值，RGB 分别对应 8bits/Channel 时的数值，即 0-255）。

由于 sRGB 色彩空间范围小于 RGB，所以每通道的实际数值会受到限制，对应关系如下：

对比度计算方法

现有亮色点 L1 和暗色点 L2，那么 L1 和 L2 的对比度即为：L1 : L2 = (L1 + 0.05) : (L2 + 0.05)。对比度用于衡量两个颜色的明度对比强弱，比值越大对比越强烈。

上述方法是基于笔者的理解和总结，如想了解更详细的介绍请查看 W3C Guideline。

发散与启发

• 大家在观察 L = 0.2126 * R + 0.7152 * G + 0.0722 * B 公式时可以发现，在 RGB 色彩模型中绿色通道提供了绝大部分的亮度，蓝色最少。例如当你在白色背景上使用绿色按钮或文字的时候请尽量降低色彩明度、提高文本大小或字重。

•  我们可以大致总结个经验。比如我们在调色板中选择字体颜色时为了保证最低 3:1 的对比度，字体色与背景色至少相距 33.3%，其他对比度同理。注意：由于每个通道对亮度的影响效果不同，此方法只适用于灰阶。

• 提到亮度可能很多同学会想到 Lab 色彩模型，但笔者对比并查阅相关资料后发现这里的亮度与 Lab 中的 L 值并不是线性关系。

• 为什么要用相对亮度来制定标准呢？笔者猜想是因为考虑到色盲群体，比如全色盲患者只能感受到光线强弱，看到的都是灰阶景象，所以只有通过亮度来衡量对比才是有意义的。这个问题欢迎大家留言讨论。

（编辑：ASP站长网）