Contrast and Color Accessibility
Evaluating Contrast and Color Use
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
- 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 and fields. You can also click the color box next to each field to select a color using a color picker window.
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 thesliders 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.
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:
- 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.
- Select the button on the left-hand sidebar of the screen.
- An icon appears next to each instance of low-contrast text detected by WAVE.
- 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 and fields in the sidebar, followed by the contrast ratio.
- Use the and options below each field to find a color combination that meets WCAG requirements.
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.
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:
- Click the eyedropper icon that appears within the browser toolbar (). A crosshairs icon will appear.
- Center the crosshairs over the color you wish to select.
Click and the color value will be copied to your clipboard.
- Paste this color into a contrast checker or into the WAVE contrast tool.
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 thesection 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 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'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.
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
and check . Then use the slider toward the bottom of the window to lighten or darken the color.
Microsoft Office 365 Accessibility Checker
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 thetab > . Text with low contrast is identified in the checker results as " ".
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):
- A preliminary scan for potential issues like:
- Color reliance (common in links and forms)
- Low contrast text
- Text in images
- Graphical objects or user interface components, as defined in WCAG 2.1
- Mouse hover and keyboard focus states
- When possible, an automated scan using WAVE or the accessibility checker in Microsoft Office (only available in Office 365 for Windows).
- 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.