Question

我在<p>中有一个<div>元素。段落文本有两种可能的颜色：白色或黑色。在运行时随机选择此颜色。背景div的颜色是在运行时随机选择的1600万种颜色。因为这两个过程都是随机的，所以有时相似的颜色最终会在一起，并且段落文本很难看到或根本看不到。

是否有一种算法可以将两种颜色相互比较，并以百分比表示法返回一种算法如何在另一种颜色之上显示？

这个问题是问两种颜色有多相似：Color Logic Algorithm

我想知道在另一个上分层时的样子。例如，根据上面文章中定义的功能，黄色和白色不是相似的颜色，但是当白色写在黄色上时，文本不容易看到。

Answer 1

本网站应该有所帮助：

http://24ways.org/2010/calculating-color-contrast

根据它，使用此功能来确定是否在bg颜色上使用黑色或白色：

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

当然，您必须将颜色转换为十六进制值才能使用它们。

Answer 2

sc-color library（披露：我是作者）有一个类似的内置函数contrastWhiteBlack()。

这是一个JsFiddle demo，用于在随机背景颜色上生成文本颜色。

核心代码如下所示：

// Parse, generate a contrast color, convert back to a color string
var textColor = sc_color([color string to parse]).contrastWhiteBlack().html();

返回两种颜色相互兼容的算法

2 个答案: