Color contrast

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.

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.

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.

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. For an overview of the “Check Accessibility” feature, see our Checking Microsoft Office for Accessibility page.

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.

The default text style in Canvas has ample color contrast. However, if you change either the foreground or background color of text on a Canvas page,  be sure to use Canvas’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.

For additional information on the Accessibility Checker that’s available in the Canvas Rich Content Editor, see our Accessibility Checker in Canvas page.

Testing contrast using Ally in Canvas

The Accessibility Checker described above checks contrast within the current Canvas page.  In addition, the Accessibility Report, a feature of Anthology Ally that’s enabled by default in all UW Canvas courses,  will also report on contrast problems throughout the course, including all pages and uploaded documents. For additional information about using Ally, see the Anthology Ally section within our Canvas page.