Color Contrast

Contact Us or call 1-877-932-8228
Color Contrast

Color Contrast

In addition to the problem of using color alone, you need to be cognizant of the combinations of foreground and background colors you use. If the foreground and background are too close to the same hue, they may not provide sufficient contrast for people with different types of color deficits or for people who are using monochrome displays. The easiest way to avoid this problem is to choose highly contrastive colors for the foreground and background.

The current Section 508 Web Accessibility Standards do not have a requirement relating to color contrast; however, the revised 508 standards under consideration in the summer of 2007 do.

Presentation of text (and images of text) in electronic documents must have a default contrast ratio of at least 5:1, except if the text is pure decoration. Large-scale text (or images of large-scale text) can allow a contrast ratio of at least 3:1.

That may sound ominous. What is the contrast ratio? You can find such a definition in the Web Content Accessibility Guidelines working document, or you can use the the Web Accessibility Toolbar, Colour -> Contrast Analyser[application] to find the contrast settings on your web page. The following screen shot shows how this tool is used. Contrast analyser screen shot

Using the mouse one can point to foreground and background colors and then the tool calculates the contrast ratio for you. In the example in the screen shot above, the light gray text on a white background at the bottom of a Flickr.com page does not have adequate contrast; in this example, the contrast ratio is 2.8 to 1. It should be at least 5 to 1 for normal text and 3 to 1 for large (bold) text.

Next