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

Question

我正在寻找一种插件或技术，它可以根据其父背景图像或 -color 的覆盖像素的平均亮度来更改文本的颜色或在预定义的图像/图标之间切换。

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

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

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

原文由 James Cazzetta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有趣的资源：

• W3C - 确保前景和背景颜色组合提供足够的对比度
• 计算颜色的感知亮度

这是 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>

原文由 Alex Ball 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

 function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substring(1,3),16);
    var g = parseInt(hexcolor.substring(3,5),16);
    var b = parseInt(hexcolor.substring(5,7),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

原文由 cyang 发布，翻译遵循 CC BY-SA 4.0 许可协议