When displaying white text on a colored background, I guess that the text is more-or-less legible depending on some kind of contrast between that color and white.
My question is, is there a formula to measure such a contrast?
The following is an example of what I'm asking about.
Consider these three colors:
.orange
{
background-color: rgb(255,192,0)
}
.pink
{
background-color: rgb(255,102,204)
}
.blue
{
background-color: rgb(0,255,255)
}
You can see these colors here https://jsfiddle.net/evkep9g9/ and here:
IMO the white-on-blue text is less easy to read than the other two.
Is there a formal which measures that contrast, which shows the white-on-blue is less readable?
I've tried to read the Wikipedia article on HSL and HSV but didn't really understand it.
The coordinates for these three colors calculated using http://www.rapidtables.com/convert/color/rgb-to-hsl.htm and http://www.rapidtables.com/convert/color/rgb-to-hsv.htm are as follows:
Orange: Pink: Blue:
RGB: 255,192,0 255,102,205 0,255,255
HSL: 45°,100%,50% 320°,100%,70% 180°,100%,50%
HSV: 45°,100%,100% 320°,60%,100% 180°,100%,100%
Without understand H
, S
, L
, and/or V
, still I expected to find that one of them was larger (i.e. whiter) in the blue than in the other two.
But that's not the case:
- The Blue's
SL
andSV
values are the same as Orange's. - The Blue's
L
value is smaller than Pink's.
I'm guessing that there's some "contrasts with white" attribute that measures how well white text should contrast with a colored background.
What is the name of this attribute, and how is it calculated, given that the attribute doesn't seem to be S
or L
or V
?
I accepted this answer, whose numeric result seems to match my subjective impression (that the blue has less contrast).
The reason why the 'blue' in this OP has less contrast is actually because it has so much (bright) green in it.
This formula which I accepted (in the answer below) is not explained in any detail (it's easy to miss) in Wikipedia's HSL and HSV article. The closest that article comes to being relevant is this:
A more perceptually relevant alternative is to use luma, Y′, as a lightness dimension (fig. 12d). Luma is the weighted average of gamma-corrected R, G, and B, based on their contribution to perceived luminance, long used as the monochromatic dimension in color television broadcast. For the Rec. 709 primaries used in sRGB, Y′709 = 0.21R + 0.72G + 0.07B; for the Rec. 601 NTSC primaries, Y′601 = 0.30R + 0.59G + 0.11B; for other primaries different coefficients should be used.
Y′601 = 0.30R + 0.59G + 0.11B
In summary the attribute might be named the "Luma" and designated with the letter "Y", but the formula for calculating it varies (perhaps depending on the palette chromacity). The accepted answer below is from and for the World Wide Web's definition of RGB.