如何更改由背景颜色确定的文本颜色？

Posted 2023-02-23

【中文标题】如何更改由背景颜色确定的文本颜色？

【英文标题】：How do I change text-color determined by the background color?

【发布时间】：2011-06-11 05:06:02

【问题描述】：

我正在寻找一种方法，最好使用 jQuery，根据背景颜色的亮度确定正确的文本颜色？

例如白色背景，黑色文字颜色。我相信这可以通过添加 HEX 值和猜测来粗略地完成，但有人知道更好的方法或 jQuery 方法吗？

【问题讨论】：

灰色 (#808080) 呢？

How to decide font color in white or black depending on background color?的可能重复

【参考方案1】：

您可以尝试反转颜色的十六进制值。所以#FFFFFF变成#000000和#AAAAAA变成#555555。当然，当你有 #888888 时，这个方法就会失败，当你倒置时，会给你 #777777（它们没有那么大的对比）。

这个blog post 描述了另一种方式（他们只使用黑色或白色作为前景色，具体取决于背景色）。我已将其翻译成 javascript：

function idealTextColor(bgColor) 

   var nThreshold = 105;
   var components = getRGBComponents(bgColor);
   var bgDelta = (components.R * 0.299) + (components.G * 0.587) + (components.B * 0.114);

   return ((255 - bgDelta) < nThreshold) ? "#000000" : "#ffffff";   


function getRGBComponents(color)        

    var r = color.substring(1, 3);
    var g = color.substring(3, 5);
    var b = color.substring(5, 7);

    return 
       R: parseInt(r, 16),
       G: parseInt(g, 16),
       B: parseInt(b, 16)
    ;

【讨论】：

感谢您提供的信息丰富的答案，我只是在看一下您建议的代码翻译，我得到了“缺失 ; before statement [Break On This Error] int bgDelta = (components.R * 0.2...组件.G * 0.587) + (bg.B * 0.114);" - 但是我看不到那个丢失；？对你有用吗？

@WiseDonkey 哎呀，我已经更新了。翻译的时候忘记把bg改成components，把int改成var，getRGBComponents用分号代替逗号。

const IdealTextColor = ([a, b, c]: number[]) => (150