Text and icons, in order to be easy to read, must have sufficient contrast between foreground and background colors. The W3C Web Content Accessibility Guidelines (WCAG) defines specific contrast ratios that must be met for compliance.
Several free tools have been developed that make it easy to check color combinations for WCAG compliance. A few tools that were specifically designed for testing contrast on web pages are described below.
WebAIM Color Contrast Checker
The WebAIM Color Contrast Checker is a website that evaluates a pair of colors for WCAG compliance. The user can enter the hex value for each color, or they can select a color using the color picker widget (specific functionality varies by browser). The checker then calculates the contrast ratio and rates the colors with a “Pass” or “Fail” rating. Conveniently, the site also includes a slider that can be used to gradually lighten or darken either of the colors until a “Pass” rating is attained.
This same feature is built into the WAVE Browser Extension, which is also developed by WebAIM and available for both Chrome and Firefox.
Deque Color Contrast Analyzer
The Deque Color Contrast Analyzer provides similar functionality to the WebAIM Contrast Checker, but in a slightly different interface and with a few additional features.
Colour Contrast Analyser
TPGI’s Colour Contrast Analyser is a downloadable application for both Windows and Mac that enables you to check the contrast of any two colors from your computer screen. This makes it particularly useful for checking colors in various applications, including documents or software, not just websites.
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 compliance. As noted above, 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.
