colors - 如何根据背景颜色决定字体颜色为白色或黑色？

Question

我想显示一些图像，如本例

填充颜色由数据库中的字段决定，颜色为十六进制(例如:ClassX -> Color:#66FFFF)。现在，我想在填充上方显示所选颜色的数据(如上图所示)，但我需要知道颜色是深色还是浅色，这样我就知道单词应该是白色还是黑色。有办法吗？谢了

Answer 1

建立在我的answer to a similar question之上.

您需要将十六进制代码分成 3 部分才能获得单独的红色、绿色和蓝色强度。代码的每 2 位数字代表一个十六进制(基数 16)表示法的值。我不会在这里详细介绍转换的细节，它们很容易查找。

获得各个颜色的强度后，您可以确定颜色的整体强度并选择相应的文本。

if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff

186 的阈值是基于理论的，但可以根据口味进行调整。根据评论，低于 150 的阈值可能更适合您。

<小时/>

编辑:上面的代码很简单，而且工作得相当好，并且似乎在 StackOverflow 上得到了很好的接受。然而，下面的评论之一表明，在某些情况下，它可能会导致不遵守 W3C 准则。在此，我得出了一种修改后的形式，该形式始终根据指南选择最高对比度。如果您不需要需要遵守 W3C 规则，那么我会坚持使用上面更简单的公式。有关此问题的有趣研究，请参阅 Contrast Ratio Math and Related Visual Issues .

W3C Recommendations (WCAG 2.0) 中给出的对比度公式为 (L1 + 0.05)/(L2 + 0.05)，其中 L1 是最浅颜色的亮度，L2 是最浅颜色的亮度最暗的等级为 0.0-1.0。黑色的亮度为 0.0，白色的亮度为 1.0，因此替换这些值可以让您确定对比度最高的值。如果黑色的对比度大于白色的对比度，则使用黑色，否则使用白色。假设您正在测试的颜色的亮度为 L，则测试将变为:

if (L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05) use #000000 else use #ffffff

这从代数上简化为:

if L > sqrt(1.05 * 0.05) - 0.05

或者大约:

if L > 0.179 use #000000 else use #ffffff

剩下的唯一事情就是计算L。该公式也是 given in the guidelines看起来像是从 sRGB 到线性 RGB 的转换，然后是 ITU-R recommendation BT.709亮度。

for each c in r,g,b:
    c = c / 255.0
    if c <= 0.04045 then c = c/12.92 else c = ((c+0.055)/1.055) ^ 2.4
L = 0.2126 * r + 0.7152 * g + 0.0722 * b

阈值 0.179 不应更改，因为它与 W3C 准则相关。如果您发现结果不符合您的喜好，请尝试上面更简单的公式。