JavaScript颜色对比

Question

我正在寻找一种技术,我们可以通过编程方式选择最佳的颜色对比,以应用于不同(不可预测的)背景颜色的HTML元素上的文本.

由于HTML元素将具有不同的颜色,我们正在寻找一种能够确定文本背后内容的颜色的技术,然后调整文本的颜色以使用具有最佳对比度的颜色.

我很确定这不能只是CSS,我已经找了Jquery解决方案,但找不到任何...有人有线索吗？

[更新]: 根据第一个回复,我想我需要改写.想象一下,我建立一个图像共享服务,我希望让人们标签上的图片自己.图片可以是任何颜色.如何为每张不同的图片选择正确的标签颜色？

Answer 1

我认为这可能会为未来的研究人员节省一点时间,这对我来说非常有效.将红色绿色和蓝色值插入功能,输出"dark-text"或"light-text".

var darkOrLight = function(red, green, blue) {
  var brightness;
  brightness = (red * 299) + (green * 587) + (blue * 114);
  brightness = brightness / 255000;

  // values range from 0 to 1
  // anything greater than 0.5 should be bright enough for dark text
  if (brightness >= 0.5) {
    return "dark-text";
  } else {
    return "light-text";
  }
}

使用来自@ David的答案的http://particletree.com/notebook/calculating-color-contrast-for-legible-text/中的一些代码.

Answer 2

看看http://www.0to255.com。只需浏览一下该网站呈现的渐变效果，您就会立即眼前一亮。你必须解谜，但只持续大约 20 秒。这是解决此类问题的绝佳网站，也是程序化解决方案的绝佳创意来源。并且不涉及数学：只需为 RGB 值插入一些字节即可。