JavaScript 颜色对比度

Question

我正在寻找一种技术，可以通过编程方式选择最佳颜色对比度，应用于不同（难以预测）背景颜色的HTML元素上的文本。

由于HTML元素将具有不同的颜色，因此我们正在寻找一种能够确定文字后面内容的颜色，并调整文字颜色以使用具有最佳对比度的颜色的技术。

我很确定这不能仅使用CSS来实现，我已经寻找了Jquery解决方案，但没有找到... 有人知道吗？

[更新]： 根据第一个回复，我想重新表达。假设我正在构建一个图像共享服务，并且我希望允许人们在图片本身上进行标记。图片可能是任何颜色。如何为每个不同的图片挑选出正确的标记颜色呢？

- Julien Genestoux

---

你可以尝试使用BackgroundCheck脚本：http://www.kennethcachia.com/background-check/ - cptstarling

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";
  }
}

使用来自http://particletree.com/notebook/calculating-color-contrast-for-legible-text/的代码，该代码取自@David的答案。

- Alex Marchant

---

请查看这个 JQuery 插件 https://github.com/joggink/jquery-colorcontrast ，它似乎实现了所说的功能。请注意（目前）插件没有迭代；您需要自己调用“each”。 - Cerber

Answer 2

现在CSS中有一个名为mix-blend-mode的属性（目前仅处于草案阶段），可以用来实现类似于您想要的效果。

.contrasting-text {
    mix-blend-mode: difference;
}

这里有一个CodePen示例，展示了相关的IT技术：https://codepen.io/thebabydino/pen/JNWqLL

- J.D.

Answer 3

看一下http://www.0to255.com。网站提供的渐变色只需要花费短暂的时间即可吸引您的眼球，并且您只需要大约20秒就能解决问题。这是一个非常适合解决此类问题和获取编程解决方案想法的好网站。而且，没有涉及数学：只需为rgb值插入一些字节即可。

- Pete Wilson

---

+1 对于这个有用的资源，尽管我不确定它是否特别回答了问题！ - Town

谢谢提供链接，但是它并没有说明我如何获取文本下面的颜色！ - Julien Genestoux

啊，我明白了，我提前了。你必须使用Javascript、DHTML和DOM。在Javascript中，找到需要更改文本颜色的对象；从该对象中提取background-color属性；然后选择标签文本的颜色。这更接近你要找的答案吗？ - Pete Wilson

@Julien Genestoux -- 关于图片：就我个人而言，我甚至不会考虑尝试将颜色集成到照片中，以产生一种复合的背景颜色，以便在对比色中显示标签文本。相反，我总是在照片上方放置一个白色的斑点，并在该白色斑点上显示黑色标签文本。这只是我的观点；毫无疑问，有很酷的算法可以计算出一个好的平均背景颜色的近似值。但就我个人而言，我不会尝试这样做。 - Pete Wilson

Answer 4

这里是另一个我从GitHub上学到的方法，他们将其应用于问题标签的颜色上。它实际上依靠CSS自定义属性和一些计算。

.hx_IssueLabel {
    --label-r:0;
    --label-g:0;
    --label-b:0;

    --lightness-threshold:0.453;
    --perceived-lightness:calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
    --lightness-switch:max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));

    background:rgb(var(--label-r), var(--label-g), var(--label-b));
    color:hsl(0, 0%, calc(var(--lightness-switch) * 100%));
}

您需要在自定义属性中单独设置RGB通道以设置背景颜色，然后通过改变HSL颜色中的亮度通道，文本颜色将从黑色渐变到白色。亮度是由一个算法计算出来的，该算法接收RGB作为输入。

- phucbm

Answer 5

这是我最喜欢的资源之一，用于计算两种颜色的“易读性”（对比度）。

W3C建议文本和文本背后的背景之间存在至少5：1的对比度http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html#G18。

从页面上可以看到：

上面显示的合规率是达到的最高合规率。 WCAG 2.0 AA级和拟议的Section 508刷新合规级别基于实现18点（加粗为14点）或更大的文本的3：1对比度或小于18点的文本的4.5：1对比度。当小于18点的文本达到7：1的对比度，18点（加粗为14点）或更大的文本达到4.5：1的对比度时，WCAG 2.0 AAA级合规级别得以满足。

- SavoryBytes

---

抱歉，但那并没有回答问题。是的，如果我能够知道文本下面的颜色，那就可以了，但我不知道怎么做。我该怎么办？ - Julien Genestoux

您可以使用JavaScript读取元素的当前背景颜色：$('.myclass').css('background-color')，通过该值，您可以计算任何其他颜色的对比度水平。我假设您想使用jQuery，因为您提到了寻找它。 - SavoryBytes

2个问题：我如何确定“myid”？如果它是一张图片呢？ - Julien Genestoux

如果您的背景是一张图片，我不会尝试使用canvas在客户端自动处理颜色 - 我会考虑服务器端的解决方案，因为它将具有更少的跨浏览器问题并且能够更好地扩展。 - SavoryBytes

Answer 6

在一行代码中解决了这个问题：

function getContrast50($hexcolor)
{ 
  return (hexdec($hexcolor) > 0xffffff/2) ? 'white':'black'; 
}

如果需要反转对比度，只需将白色和黑色交换即可。在php中实现。

- Marco

---

正如之前的评论所述，这是PHP代码，而不是Javascript。hexdec函数存在于PHP中，而不是JS中。 - Daniel