April 13, 2011, 5:07 p.m.
posted by yml
Checking for Enough Color Contrast
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
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.
JuicyStudio.com's explanation of the Suggested Luminosity Contrast Ratio Algorithm at http://juicystudio.com/article/luminositycontrastratioalgorithm.php.