How to measure the contrast between any given color and white?

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 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.

Answer

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?