黑色和白色搭配哪种颜色好看？

那么色彩对比度是如何计算的呢？

但是相对亮度是如何计算的呢？

我们来算一下吧！

颜色列表

想象一下，你需要找到一种在黑色和白色下都看起来不错的颜色。我所说的“好看”是指至少符合WCAG AA 对比度（最低）标准，即4.5:1的比例。

tl;dr：滚动到末尾以获取颜色列表

那么色彩对比度是如何计算的呢？

WCAG对比度定义如下：

对比度
（L1 + 0.05）/（L2 + 0.05），其中

• L1 是较浅颜色的相对亮度，并且
• L2 是较暗颜色的相对亮度。

注意
对比度范围可以从 1 到 21（通常写为 1:1 到 21:1）。

很简单的数学题，对吧？取两个值，然后除以它们。

但是相对亮度是如何计算的呢？

WCAG相对亮度定义如下：

相对亮度
色彩空间中任意一点的相对亮度，0 表示最深的黑色，1 表示最亮的白色

注意：
对于 sRGB 色彩空间，颜色的相对亮度定义为 L = 0.2126 * R + 0.7152 * G + 0.0722 * B，其中R、G和B定义如下：

• 如果 R _sRGB <= 0.03928 则R = R _sRGB /12.92 否则R = ((R _sRGB +0.055)/1.055) ^ 2.4
• 如果 G _sRGB <= 0.03928 则G = G _sRGB /12.92 否则G = ((G _sRGB +0.055)/1.055) ^ 2.4
• 如果 B _sRGB <= 0.03928 则B = B _sRGB /12.92 否则B = ((B _sRGB +0.055)/1.055) ^ 2.4

并且 R _sRGB、 G _sRGB和 B _sRGB定义为：

• R _sRGB = R _8位/255
• G _sRGB = G _8位/255
• B _sRGB = B _8位/255

别被这些公式搞糊涂了，这仍然是简单的数学！最后三行只是通过将颜色通道除以255来对其进行归一化，以下是一些示例：

然后，如果归一化值小于或等于 0.03928，则通过简单的除法（除以 12.92）得到R、G和B值；如果归一化值大于 0.03928，则应用上面的指数公式。最后一步是用不同的权重对这三个值求和。

我们来算一下吧！

不难看出，黑色的相对亮度为 0，白色为 1。计算它们的对比度为 (1 + 0.05) / (0 + 0.05) = 21。我们可以通过以下方式计算任何其他颜色与黑色和白色的对比度（其中“c”是颜色的相对亮度）：

• 反黑：（c + 0.05）/（0 + 0.05）
• 对阵白棋： (1 + 0.05) / (c + 0.05)

我们要求对比度至少为 4.5，因此：

• 对阵黑方： (c + 0.05) / (0 + 0.05) >= 4.5
• 对阵白棋： (1 + 0.05) / (c + 0.05) >= 4.5

解决这两个不等式可得出：

• 反对黑色：c> = 0.175
• 对阵白色：0.1833 >= c

最终我们得到的相对亮度要求为：

0.175 <= c <= 0.1833

颜色列表

最后，我创建了一支笔，它可以在 RGB 颜色空间中迭代，从黑色到白色，每个通道以 0x11 = 17 为增量。迭代所有颜色会耗费一些时间和 CPU，而且我确信列出大约 30 万种颜色并不实际。因此，这支笔迭代了所有可以用 3 位十六进制表示法描述的颜色，并列出了符合我们要求的 76 种颜色。请明智地使用它们 ;)