如何根据背景颜色确定白色或黑色字体颜色？

Question

我想显示一些像这个例子的图像替代文字填充颜色由数据库中的字段以十六进制颜色决定（例如：ClassX-> Color：＃66FFFF）。现在，我想在具有所选颜色的填充上方显示数据（如上图所示），但我需要知道颜色是深色还是浅色，因此我知道单词应为白色还是黑色。有办法吗？ks

Answer 1

以我对类似问题的回答为基础。

您需要将十六进制代码分成三部分，以获得单独的红色，绿色和蓝色强度。代码的每2位数字以十六进制（基数16）表示。在这里，我将不介绍转换的详细信息，因为它们很容易查找。

一旦获得了每种颜色的强度，就可以确定颜色的整体强度并选择相应的文本。

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

阈值186是基于理论的，但可以根据口味进行调整。根据下面的评论，阈值150可能对您更好。

编辑：上面的操作很简单，并且运行良好，并且似乎在StackOverflow上得到了很好的接受。但是，以下评论之一表明，在某些情况下，它可能导致不遵守W3C准则的情况。因此，我得出了一个修改后的表格，该表格始终根据准则选择最高的对比度。如果你没有需要遵循W3C规则，那么我会用上述简单的公式坚持。

在W3C建议书中(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。准则中也给出了该公式，看起来从sRGB到线性RGB的转换，随后是ITU-R建议BT.709的亮度。

for each c in r,g,b:

    c = c / 255.0

    if c <= 0.03928 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准则有关。如果发现结果不符合您的喜好，请尝试上述更简单的公式。

Answer 2

我不相信此代码，因为它不是我的，但我将其留在此处，以便其他人在将来快速找到：

根据Mark Ransoms的答案，这是简单版本的代码段：

function pickTextColorBasedOnBgColorSimple(bgColor, lightColor, darkColor) {

  var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;

  var r = parseInt(color.substring(0, 2), 16); // hexToR

  var g = parseInt(color.substring(2, 4), 16); // hexToG

  var b = parseInt(color.substring(4, 6), 16); // hexToB

  return (((r * 0.299) + (g * 0.587) + (b * 0.114)) > 186) ?

    darkColor : lightColor;

}

这是高级版本的代码片段：

function pickTextColorBasedOnBgColorAdvanced(bgColor, lightColor, darkColor) {

  var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;

  var r = parseInt(color.substring(0, 2), 16); // hexToR

  var g = parseInt(color.substring(2, 4), 16); // hexToG

  var b = parseInt(color.substring(4, 6), 16); // hexToB

  var uicolors = [r / 255, g / 255, b / 255];

  var c = uicolors.map((col) => {

    if (col <= 0.03928) {

      return col / 12.92;

    }

    return Math.pow((col + 0.055) / 1.055, 2.4);

  });

  var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);

  return (L > 0.179) ? darkColor : lightColor;

}

要使用它们，只需调用：

var color = '#EEACAE' // this can be any color

pickTextColorBasedOnBgColorSimple(color, '#FFFFFF', '#000000');

另外，感谢Alx和chetstone。