Contrast and Color Accessibility
Evaluating Contrast and Color Use

Introduction

This article outlines tools and techniques that can be used to evaluate contrast and color use. Before beginning evaluation, please review the previous page on understanding WCAG 2 contrast and color requirements.

There are several tools to help you evaluate contrast, each with its own strengths and weaknesses. This page will cover the following tools:

  • WebAIM contrast checker
  • WebAIM link contrast checker
  • WAVE
  • ColorZilla eyedropper
  • Colour Contrast Analyser
  • Accessibility Checker in Microsoft Office

The next page in this article will outline how to evaluate contrast using Chrome DevTools

WebAIM Contrast Checker

WebAIM offers an online contrast checker that will present the contrast difference between two colors, and will help you find a color that meets the desired level of contrast. To use our contrast checker, enter Hex color values in the Foreground Color and Background Color fields. You can also click the color box next to each field to select a color using a color picker window.

Contrast checker results showing blue on white with 4.28:1 contrast.

The tool will display the contrast ratio and show if you "Pass" or "Fail" Level AA and AAA requirements for both normal text and large text, and WCAG 2.1 Level AA non-text requirements—so there are five pass/fail possibilities.

If there is not enough contrast, use the Lightness sliders to change the foreground and/or background colors until you reach the desired contrast ratio.

Currently, this tool only accepts Hex color values and does not support alpha (transparency). If you are using a different color format like RGB, you may want to use a different contrast tool or use an online Hex color conversion tool.

WebAIM Link Contrast Checker

If a link is only identified by a color difference (typically meaning that it is not underlined), WCAG requires a 3:1 contrast ratio between the link text and surrounding body text. This is in addition to the 4.5:1 contrast of the link text to the background, and the body text to the background. The WebAIM Link Contrast Checker lets you test these three contrast requirements at once. It is very similar to the contrast checker, but there are three color fields instead of two: Link Color, Body Text Color, and Background Color. The tool will then show if these colors pass or fail each of these three contrast requirements.

Checker results showing link to body text failing and the other two requirements passing.

If one or more of these requirements fails, use the Lightness sliders to identify an acceptable color scheme. The best way to accomplish this is typically to darken the body text or lighten the background (assuming a dark on light color scheme). It may also be possible to lighten the text as well, but this will probably result in link text that is harder for everyone to read.

Note

To keep the interface as simple as possible, this tool does not show Level AAA contrast requirements or contrast requirements for large text.

WAVE

WAVE contrast report example

The WAVE accessibility evaluation tool scans text and text background styles and identifies most instances of text that do not meet the WCAG 2.0 AA 4.5:1 contrast ratio. WAVE also checks "Large Text" (as defined by WCAG) against the lower 3:1 contrast ratio requirement.

To use WAVE to find contrast issues:

  1. Go to wave.webaim.org, enter a webpage address, and run a WAVE scan, or use a WAVE browser extension to run WAVE directly in Chrome or Firefox.
  2. Select the Contrast button on the left-hand sidebar of the screen.
  3. An icon appears next to each instance of low-contrast text detected by WAVE.
  4. Click on an icon in the sidebar or within the page to see the contrast ratio for this text in the sidebar. The colors will appear in the Foreground color and Background color fields in the sidebar, followed by the contrast ratio.
  5. Use the lighter and darker options below each field to find a color combination that meets WCAG requirements.
Note

WAVE cannot detect all contrast issues. It does not account for background images, gradients, transparency, etc. It also cannot detect text that is part of an image. A manual scan for these types of contrast issues is still necessary.

ColorZilla Eyedropper

Text often appears within images, or over images, gradients, and other backgrounds that are not a solid color. Testing contrast in these instances requires the use of an "eyedropper" utility that allows you to select the color that appears in a specific place on the screen. ColorZilla is a popular eyedropper available for Chrome and Firefox.

After installing ColorZilla in your browser:

  1. Click the eyedropper icon that appears within the browser toolbar (Screenshot of iconicon). A crosshairs icon will appear.
  2. Center the crosshairs over the color you wish to select.
    Colorzilla being used to select color
    Click and the color value will be copied to your clipboard.
  3. Paste this color into a contrast checker or into the WAVE contrast tool.
Tip

Enlarging the webpage sometimes makes it easier to select the desired color with an eyedropper. Use Ctrl (Windows) or command (Mac) and the + key to zoom in, the key to zoom out, and 0 to reset the page size.

Colour Contrast Analyser

The Colour Contrast Analyser, or CCA, is a downloadable program for Windows and macOS that allows you to test contrast within any program. The program allows you to enter colors using RGB, hex, and HSL formats, and it supports testing of colors with alpha (transparency). But the main feature that sets it apart is its ability to use the eyedropper tool to measure the contrast of anything on the screen.

To do this, select the eyedropper in the Foreground colour section and use the eyedropper to select the text or foreground color. If the background is any color other than white, do the same with the Background colour eyedropper. CCA will notify you if the color combination meets AA and AAA requirements for text as well as WCAG 2.1 AA requirements for non-text content.

CCA

CCA's greatest strength may also be its greatest weakness—it is separate from the web browser. If an evaluator is comfortable digging into the HTML and CSS of a webpage, it is usually more efficient to use WAVE and Chrome DevTools to check contrast. But CCA is an excellent tool evaluating text in images, and it really shines when evaluating electronic documents, such as Word and PDF files.

Note

An earlier version, called "CCA Classic", is also available for download. The new version is more refined and useful overall, but the earlier version has a couple notable advantages:

  • Better keyboard accessibility, including the ability to use the arrow keys with the color picker. This makes it much easier to select colors from small areas such as a text character.
  • The ability to change just the lightness or luminance of a color. This is an important feature when trying to find a darker shade that meets WCAG contrast requirements with less change to the color itself. To enable this, select Options > Show Colour sliders > and check HSV. Then use the Value slider toward the bottom of the window to lighten or darken the color.
    CCA Classic with the Value slider highlighted

Microsoft Office 365 Accessibility Checker

Screenshot of the Microsoft Word Accessibility Checker reporting two instances of low-contrast text

Microsoft Office recently started identifying low-contrast text within its built-in accessibility checker. This feature is currently only available in Office 365 for Windows, but it is a welcome addition that will hopefully be included in future versions of Office for Mac as well.

To check for low-contrast text in Word, PowerPoint, and Excel, select the Review tab > Check Accessibility. Text with low contrast is identified in the checker results as "Hard-to-read text contrast".

Click on a result to jump directly to that issue within the document.

It evaluates both text and background color, and it automatically applies the lower 3:1 contrast ratio to large text. However, like other tools, a manual scan for text in images, or text over images/gradients/etc. is still necessary.

Finding Your Own Process

There is no one "best" tool for testing contrast. The tools you use will depend on the content being evaluated and on personal preference. Likewise, there is no single testing process that is best for all content. But most contrast evaluations will include at least these three "steps" (although the order may vary):

  1. A preliminary scan for potential issues like:
    1. Color reliance (common in links and forms)
    2. Low contrast text
    3. Text in images
    4. Graphical objects or user interface components, as defined in WCAG 2.1
    5. Mouse hover and keyboard focus states
  2. When possible, an automated scan using WAVE or the accessibility checker in Microsoft Office (only available in Office 365 for Windows).
  3. A manual test of other potential issues using contrast checkers, ColorZilla, DevTools, Colour Contrast Analyser, or any combination of these.

Evaluating contrast and color use can take considerable time and effort, but this process will become more natural with time. Your preferred tools and methods will likely change with experience and may grow beyond what is outlined in this article, but applying the principles and steps in this article will provide a solid foundation of what is required in WCAG 2 and how to test for it.