Skip to main content
Accessible Technology

Providing Sufficient Color Contrast

Overview

Some users have difficulty perceiving text if there is too little contrast between foreground and background. The W3C Web Content Accessibility Guidelines 2.0 define specific contrast ratios that must be met in order comply at particular levels. In order to meet the guidelines at Level AA, text or images of text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text). In order to meet the guidelines at the stricter Level AAA, the contrast ratio must be at least 7:1 (or 4.5:1 for large text).

Techniques

When designing the color scheme of a website, web page, or document, be sure to consider whether there is sufficient contrast between foreground text and background. Use the tools listed in the Testing section to check the colors you’ve selected.

Testing

Several free tools have been developed that make it easy to check color combinations for WCAG 2.0 compliance. Following are two excellent examples:

Colour Contrast Analyser

The Paciello Group’s Colour Contrast Analyser for Windows or Mac is a downloadable application that enables you to check the contrast of any two colors. You can do so by entering the hex values of color combinations or by using the eyedropper tool to grab foreground and background colors from anywhere on the screen. The tool then provides information on the contrast between these colors, including Pass or Fail ratings for various levels of WCAG 2.0 compliance. Our goal at the University of Washington is to at least attain a Pass rating at Level AA, although a Pass rating at Level AAA is strongly encouraged.

screen shot of Colour Contrast Checker, showing four Pass ratings

WebAIM Color Contrast Checker

The WebAIM Color Contrast Checker is a website that provides an excellent companion to the Colour Contrast Analyser. Its most useful feature is a set of “Lighten” and “Darken” links that can be used to make subtle changes to existing colors until a Pass rating is attained.

Screen shot of WebAIM Color Checker website

References