13

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:

enter image description 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 and SV 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.

0

6 Answers 6

19

The attribute you are looking for is “relative luminance,” L, which, for a standard monitor, can be calculated as:

L = 0.2126 * Rg + 0.7152 * Gg + 0.0722 * Bg,

Where Rg, Gg and Bg are R, G, B values transformed as follows:

if R <= 10 then Rg = R/3294, else Rg = (R/269 + 0.0513)^2.4

if G <= 10 then Gg = G/3294, else Gg = (G/269 + 0.0513)^2.4

if B <= 10 then Bg = B/3294, else Bg = (B/269 + 0.0513)^2.4

Using the formula above:

  • White (255,255,255) is (within rounding): 1.000

  • Orange (255,192,0) is 0.588

  • Pink (255,102,204) is 0.397

  • Blue (0,255,255) is 0.787

From this we see blue has the worse contrast with white (its relative luminance is closest to white's 1.000), followed by orange, then pink. As you intuited, the more contrast, the easier it is to read the text. You can calculate the contrast ratio as

(L1 + 0.05) / (L2 + 0.05)

Where L1 is the L larger relative luminance, and L2 is the smaller. So:

  • White on Orange has a contrast ratio of 1.65

  • White on Pink has a contrast ratio of 2.35

  • White on Blue has a contrast ratio of 1.25

They're all pretty bad.You want a minimum contrast ratio of 4.5. Seven is preferred, especially for small text like you have in your example. Those are standards from the W3C Accessibility Guidelines, but it’s a good rule for “typical” users too. You can darken your chosen colors* but that will change them considerably (your orange becomes brown, your pink becomes mulberry). With these colors, the easiest way to get acceptable contrast is to use black text. That will have a minimum contrast ratio of 7.99.

*As an aside, you may want to suggest to your boss that high-saturation background tends to look really garish. Is that really the effect he wants? Is this a party web site or something?

3
  • 2
    Thanks you. I don't think the contrastchecker web page mentioned in the other answers says so, but its script uses about the same formula for luminance as the one you give here, i.e. it uses var ratio = (Math.max(L1, L2) + 0.05)/(Math.min(L1, L2) + 0.05) and var L = (0.2126 * R + 0.7152 * G + 0.0722 * B); where color = (color <= 0.03928) ? color/12.92 : Math.pow(((color + 0.055)/1.055), 2.4);.
    – ChrisW
    Jul 28, 2015 at 10:25
  • I'm surprised that green is 10 times more luminant than blue (but looking at example of the raw colors I suppose that's possible: pure blue on the RGB scale is quite dark, where pure green is quite bright.
    – ChrisW
    Jul 28, 2015 at 10:29
  • 1
    @ChrisW, Yes, the constants in the formula take into account human eye sensitivity to various light frequencies for a constant amount of physical light. We've evolved to be most sensitive to the middle of the visible spectrum, that being the strongest light from our sun. Jul 28, 2015 at 11:47
4

According to the WCAG 2.0 web accessibility standards, the contrast for a text and background color should be a ratio of at least 4.5:1. Their checker shows your current background colors as being too light. I have taken screenshots of the differences:

Current Yellow Background Color Current Pink Background Color Current Blue Background Color

There is not enough contrast between the background color and the text. If the eye has to strain to read the text, the website will not be very effective, and people with disabilities will be able to read it even less.

There is a resource called WebAIM Color Contrast Checker that will check your contrast ratio for you. To be very careful, they have two levels of contrast ratios. One is called AA and the other is called AAA. For the more serious level of contrast, the ratio for small or normal sized text is 7:1.

Yellow Background Color with Normal Sized White Text at AAA Ratio Level

Pink Background Color with Normal Sized White Text at AAA Ratio Level

Blue Background Color with Normal Sized White Text at AAA Ratio Level

Alternatively, you could just use their AA ratio rating for large text (above 18pt), which looks like this and gives you more opportunity for variation in your design:

Blue Background Color with Large Sized White Text at AA Ratio Level

1
  • 1
    This is a great answer with lots of detail, that walks people through the process. Nicely done!
    – JeromeR
    Jul 28, 2015 at 7:07
3

I think you're a bit confused here. HSL stands for Hue, Saturation, Lightness. If you need to know white= 100% Lightness. So the opposite to white is still L, only that at 0% (thus if you use any value for H and S, then add 0% for the L value, you'll get black).

You can see the w3 recommendations with examples here

As for HSV, it's a bit more complex, because the V (Value, could also be B for Brightness), while it's still black at 0%, if you set it at 100% it could be white or another color depending on saturation value.

Either way, you can see both these methods deal with brightness, so your boss seems to be more or less on topic even without any scientific backup!

As for your specific colors, they have no relation with your question so really don't understand what you mean, but in short, to answer your specific question, the opposite to white is black, and whether you use HSV or HSL, it will always be 0

4
  • It's true that I am confused/ignorant. I think you're suggesting that because L is lightness, therefore a small L should contrast with white. If that is so, why is white-on-blue less readable (apparently less contrast) than white-on-pink, given that pink's L value is 70% while blue's is only 50%?
    – ChrisW
    Jul 27, 2015 at 23:14
  • Do you agree that the white-on-blue is less readable than the other two? If so, why is that (which attribute of the color is a measure of how much less readable it is)?
    – ChrisW
    Jul 27, 2015 at 23:28
  • sorry, I never said you were ignorant, please don't put words in my mouth. I was answering your specific question as I understood it, there are other factors that goes from the color properties and the NORMAL eye's ability to perceive some range of colors better than others, to the saturation of the color. No matter what you perceive, it's still scientifically true, your (and my) eye gets some colors better. And yes, pink is one of the most contrasting colors to the human eye (hence white on red signs). More at designworkplan.com/design/signage-and-color-contrast.htm
    – Devin
    Jul 27, 2015 at 23:30
  • It was me who said I'm ignorant (no offence intended). That link to "signage contrast" which you posted looks interesting. It mentions a difference in LRV (light reflectance) as a metric for contrast. Is there a formula to calculate this apparent LRV for any given RGB value? Do you agree that subjectively the blue in the OP is less readable, and do you know a formula that predicts/quantifies that readability?
    – ChrisW
    Jul 28, 2015 at 0:11
2

If you want to check the readability of text in contrast to the background use the following link - webaim.org/resources/contrastchecker

It will allow you to easily identify whether there is enough contrast between the text and background to determine if people with visual impairments can read the text. It also helps with meeting Level AA (or AAA) standards for WCAG 2.0.There are guidelines on the page which will tell you if there's enough contrast (in your case 4.5:1 ratio would be ideal).

0

Please use http://contrastchecker.com/ to check if the color combiantion of foreground(text) and background passes the WCAG criteria. Website lists 6 criteria for which you can check your combinations.

0

Snook colour contrast checker

You can test foreground and background colour combinations with the Snook colour contrast checker.

http://snook.ca/technical/colour_contrast/colour.html It gives you various results including whether the contrast passes various WCAG compliances.

Example results:

enter image description here

N.b. This is recommended by the BBC for their designers to follow

Test every foreground and background colour combination against the Snook colour contrast checker Every combination must pass against the WCAG 2.0 AA standard http://www.bbc.co.uk/guidelines/futuremedia/accessibility/html/colour-contrast.shtml

1
  • That page doesn't much explain its calculation, but looking at the javascript in that page imo I see that the displayed "Contrast Ratio" value is calculated using a "WCAG2 formula" that's the same as the accepted answer.
    – ChrisW
    Jul 29, 2015 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.