如何根据背景颜色决定白色或黑色字体颜色? [英] How to decide font color in white or black depending on background color?

查看:1707
本文介绍了如何根据背景颜色决定白色或黑色字体颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想显示一些像这个例子的图片

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

推荐答案

建立在我的

Building on my answer to a similar question.

您需要中断十六进制代码分成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



/ strong>以上是简单的,工作相当不错,似乎在StackOverflow这里有良好的接受。但是,下面的一个注释表明,在某些情况下,它可能导致不遵守W3C指南。因此,我得到一个修改后的表格,总是根据指南选择最高的对比度。


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.

W3C建议(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的转换,后跟< a href =http://en.wikipedia.org/wiki/Luma_(video)#Rec._601_luma_versus_Rec._709_luma_coefficients>针对亮度的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

这篇关于如何根据背景颜色决定白色或黑色字体颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆