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

Question

我已经考虑了以下内容，所以现在我想知道您的意见，可能的解决方案等。

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

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

此外，如果脚本会注意到父级没有定义的background-color或-image，然后继续搜索最接近的值（从父元素到其父元素），那将是很好的选择。

您对此想法有什么看法？已经有类似的东西了吗？脚本示例？

干杯J.

Answer 1

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>