Recipe 12.5. Checking for Enough Color Contrast


Problem

You want to make sure there is enough contrast between two colors.

Solution

Use the Luminosity Contrast Ratio Analyser from JuicyStudio.com at http://juicystudio.com/services/luminositycontrastratio.php.

Enter two color values into the validator and press Calculate Luminosity Contrast Ratio button, as shown in Figure 12-9.

Figure 12-9. Entering values to check luminosity contrast


Along with a color sample of the two colors, a summary is presenting noting whether you pass the luminosity contrasts level 2, level 3, or not at all. In Figure 12-10, the example notes that the color combination has passed both levels 2 and 3.

Figure 12-10. The results of the luminosity test


Discussion

The W3C's Web Content Accessibility Guidelines state that in order to make text legible, designers need to make the content in the foreground be able to be perceived against the background.

When the color for text is close to the same shade of hue as the background color, the text becomes illegible. To create legible text, the colors need to have greater contrast by being further apart from each other in the spectrum or be significantly darker or lighter shade of the same color.

An example of great contrast is the yellow text against a black background much like the stylized Batman logo (from the Tim Burton Batman movies of the 1990s).

For colors to pass the second level of the luminosity, the ratio of luminosity contrast needs to be at least 5:1. That means one color needs to be at least 5 times as darker or lighter as the other color.

For colors to pass the third level, the luminosity contrast ratio must be at least 10:1.

See Also

JuicyStudio.com's explanation of the Suggested Luminosity Contrast Ratio Algorithm at http://juicystudio.com/article/luminositycontrastratioalgorithm.php.




CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net