Color Contrast

This article discusses color contrast and accessibility in webpages, documents and D2L.

Some users have difficulty perceiving text if there is too little contrast between foreground and background. The W3C Web Content Accessibility Guidelines (WCAG) 2.1 define specific contrast ratios that must be met in order comply at particular levels:

• Level AA: 4.5:1
• Level AA (large text): 3:1
• Level AAA: 7:1
• Level AAA (large text): 4.5:1

The contrast requirements for large text (18-point or 14-point bold) are less stringent than those for regular-sized text, and the contrast requirements for Level AA are less stringent than those for Level AAA.  At the University of Washington, our goal is to meet the Level AA requirements.

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.

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.

Techniques for Word

The “Check Accessibility” feature built into Microsoft Office will flag “Hard-to-read text contrast” if the ratio of the text and the background falls below a certain threshold. Follow the prompts within the Inspection Results to increase the contrast. 

PDF

Adobe Acrobat’s built-in Accessibility Checker includes an option “Document has appropriate color contrast” that can be toggled on/off with a checkbox.  However, this results only in a warning that color contrast must be reviewed manually. Given this limitation, it is important to review color contrast in the document’s authoring software before exporting or saving it as a PDF.

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. 

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.

 

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.

Testing contrast on D2L pages

The default text style in D2L has ample color contrast. However, if you change either the foreground or background color of text on a D2L page,  be sure to use D2L’s accessibility checker to ensure the colors you’ve chosen satisfy accessibility requirements.

The Accessibility Checker checks for a variety of issues within the current page.  If there are multiple issues, click the Next button to step through the issues. If there are any contrast issues, you will be informed of this. The Accessibility Checker provides two ways of changing the text color:

1. A rectangle is shown with a gradient-based on your chosen text color, and a small circle that identifies your chosen color within the gradient. Drag the circle to select a new color.  The Apply button at the bottom of the dialog will remain disabled until you have selected a color that satisfies contrast requirements.
2. There are two sliders for the foreground and background colors. Drag one or both sliders until you find a color combination that meets contrast requirements, and the Apply button is no longer disabled.