JavaScript 颜色对比器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5650924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript color contraster
提问by Julien Genestoux
I'm looking for a technique where we could programmatically pick the best color contrast to apply on text over HTML elements of different (unpredictable) background colors.
我正在寻找一种技术，我们可以通过编程方式选择最佳颜色对比度以应用于不同（不可预测）背景颜色的 HTML 元素上的文本。
Since the HTML elements will have different colors, we're looking for a technique that will be able to determine what is the color of the content behind the text, and then adapt the text's color to use the one with the best contrast.
由于 HTML 元素将具有不同的颜色，我们正在寻找一种技术，能够确定文本背后内容的颜色，然后调整文本的颜色以使用具有最佳对比度的颜色。
I'm quite sure this can't be CSS only, I've looked for Jquery solutions but couldn't find any... anyone has a clue?
我很确定这不能只是 CSS，我已经寻找了 Jquery 解决方案，但找不到任何......有人有线索吗？
[UPDATE] :Based on the first replies, I guess I need to rephrase. Imagine that I'm building a image sharing service and I want to allow people to tag onthe pictures themselves. The pictures can be of any color. How can I pick up the right color of the tags, for each different picture?
[更新]：根据第一批回复，我想我需要重新措辞。想象一下，我建立一个图像共享服务，我希望让人们标签上的图片自己。图片可以是任何颜色。我怎样才能为每张不同的图片选择正确的标签颜色？
回答by Alex Marchant
I think this might save any future researchers a little time, this works perfectly for me. Plug in the red green and blue values into the function and it outputs "dark-text" or "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";
}
}
Using some code from http://particletree.com/notebook/calculating-color-contrast-for-legible-text/from @David's answer.
使用@David回答中来自http://particletree.com/notebook/calculating-color-contrast-for-legible-text/ 的一些代码。
回答by Pete Wilson
Take a look at http://www.0to255.com. Just a moment's glance at the gradients the site presents will light you right up. You'll have to puzzle, but only for about 20 seconds. It's a great site for such problems and a terrific source of ideas for programmatic solutions. And there's no math involved: just plug in some bytes for rgb vals and go.
看看http://www.0to255.com。只需看一眼网站呈现的渐变，就会让您眼前一亮。你必须拼图，但只有大约 20 秒。它是解决此类问题的绝佳网站，也是程序化解决方案的绝佳创意来源。并且不涉及数学：只需为 rgb vals 插入一些字节即可。
回答by J.D.
There is now a property called mix-blend-modein CSS (currently just in draft) that can be used to achieve something similar to what you want.
现在有一个mix-blend-mode在 CSS 中调用的属性（目前只是草案），可用于实现与您想要的类似的东西。
.contrasting-text {
mix-blend-mode: difference;
}
CodePen someone has put together demonstrating this: https://codepen.io/thebabydino/pen/JNWqLL
CodePen 有人拼凑起来证明这一点：https://codepen.io/thebabydino/pen/JNWqLL
回答by daniellmb
This is my fav resource to calculate the "readability"(contrast ratio) of two colors.
the W3C suggests a contrast ratio of at least 5:1 exists between text and background behind the text http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html#G18
W3C 建议文本后面的文本和背景之间至少存在 5:1 的对比度http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html#G18
From the page:
从页面：
The compliance rate shown above is the highest compliance rate met. The WCAG 2.0 level AA and proposed Section 508 refresh compliance level is based on achieving a contrast ratio of 3:1 for text with a size of 18 points (14 points if bolded) or larger or 4.5:1 for text with a size less than 18 points. The WCAG 2.0 level AAA compliance level is meet when a contrast ration of 7:1 is achieved for text less than 18 points and 4.5:1 for text 18 points (14 points if bolded) or larger.
上面显示的合规率是达到的最高合规率。WCAG 2.0 级别 AA 和提议的第 508 节更新合规性级别基于对大小为 18 磅（如果加粗为 14 磅）或更大的文本实现 3:1 的对比度，或者对小于18 分。当小于 18 分的文本达到 7:1 的对比度和 18 分（如果加粗为 14 分）或更大的文本达到 4.5:1 的对比度时，即符合 WCAG 2.0 级 AAA 合规性级别。
回答by Marco
In just one line this solves the problem:
只需一行即可解决问题：
function getContrast50($hexcolor)
{
return (hexdec($hexcolor) > 0xffffff/2) ? 'white':'black';
}
If the contrast need to be reversed just swicth white with black and it does the trick. In php.
如果需要反转对比度，只需将白色与黑色切换即可。在 PHP 中。
