根据覆盖的背景区域的亮度更改文本颜色？

javascript jquery html css sass

2022-08-30 02:59:49

我正在寻找一种插件或技术，可以更改文本的颜色或在预定义的图像/图标之间切换，具体取决于其父级背景图像或颜色的覆盖像素的平均亮度。

如果其背景的覆盖区域相当暗，请将文本设置为白色或切换图标。

此外，如果脚本注意到父元素是否没有定义的背景色或图像，然后继续搜索最近的（从父元素到其父元素），那就太好了。

你怎么看，知道这个想法？已经有类似的东西了吗？例子？

答案 1

有趣的资源：

这是W3C算法（也有JSFiddle演示）：

const rgb = [255, 0, 0];

// Randomly change to showcase updates
setInterval(setContrast, 1000);

function setContrast() {
  // Randomly update colours
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);

  // http://www.w3.org/TR/AERT#color-contrast
  const brightness = Math.round(((parseInt(rgb[0]) * 299) +
                      (parseInt(rgb[1]) * 587) +
                      (parseInt(rgb[2]) * 114)) / 1000);
  const textColour = (brightness > 125) ? 'black' : 'white';
  const backgroundColour = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#bg').css('color', textColour); 
  $('#bg').css('background-color', backgroundColour);
}

#bg {
  width: 200px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="bg">Text Example</div>

答案 2

这篇关于计算颜色对比度的24种方法的文章可能会引起您的兴趣。忽略第一组函数，因为它们是错误的，但 YIQ 公式将帮助您确定是使用浅色还是深色前景色。

获得元素（或祖先）的背景色后，可以使用文章中的此函数来确定合适的前景色：

function getContrastYIQ(hexcolor){
    hexcolor = hexcolor.replace("#", "");
    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';
}