Skip to content
Accessible Technology

Color contrast in Canvas

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.

For an overview of this issue, see Color Contrast in our IT Accessibility Checklist.

Testing contrast on Canvas pages

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.

Screen shot of the Canvas Rich Content Editor, with orange on yellow text. The Accessibility Checker icon is circled.
The Accessibility Checker icon is located at the bottom of the Rich Content Editor.

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.

Screen shot of the Canvas Accessibility Checker tool for changing to an accessible color combination

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 Blackboard 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 our Ally in Canvas page.