我正在寻找一种技术，我们可以通过编程方式选择最佳颜色对比度，以应用于具有不同（不可预测的）背景颜色的 HTML 元素上的文本。
由于 HTML 元素将具有不同的颜色，我们正在寻找一种能够确定文本背后内容的颜色的技术，然后调整文本的颜色以使用具有最佳对比度的颜色.
我很确定这不能只是 CSS，我一直在寻找 Jquery 解决方案但找不到任何...有人有线索吗？
[更新]： 根据第一个回复，我想我需要重新措辞。想象一下，我正在构建一个图像共享服务，并且我想允许人们自己标记图片on。图片可以是任何颜色。如何为每张不同的图片选择正确的标签颜色？
【问题讨论】：
标签： javascript css colors contrast
我认为这可能会为任何未来的研究人员节省一点时间，这对我来说非常有效。将红色绿色和蓝色值插入函数，它会输出“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/ 中的一些代码。
【讨论】：
看看http://www.0to255.com。只需浏览一下该网站呈现的渐变色，您就会立刻感到眼前一亮。你将不得不解谜，但只有大约 20 秒。它是解决此类问题的好网站，也是程序化解决方案的绝佳创意来源。并且不涉及数学：只需为 rgb vals 插入一些字节即可。
【讨论】：
现在 CSS 中有一个名为 mix-blend-mode 的属性（目前只是草稿），可用于实现与您想要的类似的东西。
.contrasting-text {
mix-blend-mode: difference;
}
有人整理的 CodePen 证明了这一点：https://codepen.io/thebabydino/pen/JNWqLL
【讨论】：
这是我最喜欢的两种颜色的calculate the "readability"（对比度）资源。
W3C 建议文本和文本后面的背景之间存在至少 5:1 的对比度http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html#G18
从页面：
上面显示的合规率是达到的最高合规率。 WCAG 2.0 AA 级和提议的第 508 节刷新合规性级别基于实现 3:1 的对比度，用于大小为 18 点（如果加粗为 14 点）或更大的文本，或者对于大小小于 4.5:1 的文本18 分。当小于 18 磅的文本达到 7:1 的对比度和 18 磅（粗体为 14 磅）或更大的文本达到 4.5:1 时，符合 WCAG 2.0 级别 AAA 合规级别。
【讨论】：
只用一行就解决了问题：
function getContrast50($hexcolor)
{
return (hexdec($hexcolor) > 0xffffff/2) ? 'white':'black';
}
如果需要反转对比度，只需用黑色切换白色即可。在php中。
【讨论】：