如何根据背景颜色确定白色或黑色的字体颜色? [英] How to decide font color in white or black depending on background color?
问题描述
我想展示一些像这个例子的图片
I want to show some images like this example
填充颜色由数据库中的字段决定，颜色为十六进制(例如:ClassX -> 颜色:#66FFFF).现在，我想在所选颜色的填充上方显示数据(如上图所示)，但我需要知道颜色是深还是浅，所以我知道单词应该是白色还是黑色.有办法吗?tks
The fill color is decided by a field in the data base with the color in hex (ex:ClassX -> Color: #66FFFF). Now, I want to show data above a fill with the selected color (like in the image above) but i need to know if the color is dark or light so i know if the words should be in white or black. Is there a way? tks
推荐答案
建立在我的回答类似问题.
您需要将十六进制代码分成 3 部分以获得单独的红色、绿色和蓝色强度.代码的每 2 位数字代表一个十六进制 (base-16) 表示法的值.我不会在这里详细介绍转换的细节，它们很容易查找.
You need to break the hex code into 3 pieces to get the individual red, green, and blue intensities. Each 2 digits of the code represent a value in hexadecimal (base-16) notation. I won't get into the details of the conversion here, they're easy to look up.
一旦您获得了各个颜色的强度，您就可以确定颜色的整体强度并选择相应的文本.
Once you have the intensities for the individual colors, you can determine the overall intensity of the color and choose the corresponding text.
if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff
186 的阈值是基于理论的，但可以根据口味进行调整.根据评论，低于 150 的阈值可能更适合您.<小时> 上面的内容很简单并且运行良好，并且似乎在 StackOverflow 上得到了很好的接受.但是，下面的评论之一表明，在某些情况下，它可能会导致不遵守 W3C 指南.在此我推导出一个修改过的表格，它总是根据指南选择最高的对比度.如果您不需要遵守 W3C 规则，那么我会坚持使用上面更简单的公式.
The threshold of 186 is based on theory, but can be adjusted to taste. Based on the comments below a threshold of 150 may work better for you.
The above is simple and works reasonably well, and seems to have good acceptance here at StackOverflow. However, one of the comments below shows it can lead to non-compliance with W3C guidelines in some circumstances. Herewith I derive a modified form that always chooses the highest contrast based on the guidelines. If you don't need to conform to W3C rules then I'd stick with the simpler formula above.
W3C Recommendations 中给出的对比公式是 (L1 + 0.05)/(L2 + 0.05)，其中 L1 是最亮颜色的亮度，L2 是 0.0-1.0 范围内最暗颜色的亮度.黑色的亮度为 0.0，白色为 1.0，因此替换这些值可让您确定对比度最高的值.如果黑色的对比度大于白色的对比度，则使用黑色，否则使用白色.给定您作为 L 测试的颜色的亮度，测试变为:
The formula given for contrast in the W3C Recommendations is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lightest color and L2 is the luminance of the darkest on a scale of 0.0-1.0. The luminance of black is 0.0 and white is 1.0, so substituting those values lets you determine the one with the highest contrast. If the contrast for black is greater than the contrast for white, use black, otherwise use white. Given the luminance of the color you're testing as L the test becomes:
if (L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05) use #000000 else use #ffffff
这在代数上简化为:
if L > sqrt(1.05 * 0.05) - 0.05
或大约:
if L > 0.179 use #000000 else use #ffffff
剩下的就是计算L.该公式也是指南中给出的，看起来像是从 sRGB 到线性的转换RGB 后跟 ITU-R 建议 BT.709亮度.
The only thing left is to compute L. That formula is also given in the guidelines and it looks like the conversion from sRGB to linear RGB followed by the ITU-R recommendation BT.709 for luminance.
for each c in r,g,b:
c = c / 255.0
if c <= 0.03928 then c = c/12.92 else c = ((c+0.055)/1.055) ^ 2.4
L = 0.2126 * r + 0.7152 * g + 0.0722 * b
0.179 的阈值不应更改，因为它与 W3C 指南相关.如果您发现结果不符合您的喜好，请尝试上面更简单的公式.
The threshold of 0.179 should not be changed since it is tied to the W3C guidelines. If you find the results not to your liking, try the simpler formula above.
这篇关于如何根据背景颜色确定白色或黑色的字体颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
