Checking for Enough Color Contrast






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.

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, the example notes that the color combination has passed both levels 2 and 3.

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.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows