Checking for Enough Color Contrast

Checking for Enough Color Contrast


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


Use the Luminosity Contrast Ratio Analyser from at

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.

See Also's explanation of the Suggested Luminosity Contrast Ratio Algorithm at

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