Color Contrast in Canvas

Published

Color selection should be considered when creating a document. When text is hard to read, individuals often bypass sections of a document or simply become unable to understand the document.

A general rule of thumb: If it’s hard to read for the person writing it, then it’s hard to read for the person reading it.

Color contrast standards

Under the Web Content Accessibility Guidelines 2.0, Level AA, which apply to the web documents, there are two color ratios to know:

  • A ratio of 4.5 to 1 for normal sized text, sized at less than 14 points. This rule also is applicable to text that is less than 18 points and has no bold style applied.
  • A ratio of 3 to 1 for large-sized text, sized at 18 points for more. Text that is 14 points and bolded is also considered to be large sized with the 3:1 ratio being applicable.

For example, text that is red on blue has a contrast ratio of 1.5:1, and would not be viewable to many people. Adjusting it to yellow on blue instead holds a ratio of 5.8:1 and is viewable to most people.

Color Contrast Within Canvas

Checking for color contrast or as Canvas calls it text contrast within Canvas can be done within Canvas either using the Accessibility Checker in the rich content editor or by using UDOIT.

Canvas Accessibility Checker

For text contrast, the Accessibility Checker verifies color using the same calculations as the WebAIM tool and verifies against Theme Editor templates without High Contrast Styles. However, High Contrast Styles must be enabled for verification if a link color is overwritten manually in the Rich Content Editor.

Using the Accessibility Checker in canvas may prompt you to correct color contrast. It will present you with two sliders so you may select new higher contrast colors for your text.

Open Accessibility Checker

Open Rich Content Editor

At any visual text box editor in Canvas, click the Accessibility Checker icon.

Note: Depending on the width of your browser window, you may have to scroll the menu bar horizontally to view the icon.

Accessibility Checker

Color Contrast correction tool within the Canvas accessibility checker within the Canvas rich content editor. Two sliders are presented to correct color contrast.Text smaller than 18pt (or bold 14pt) should display a minimum contrast ratio of 4.5:1.

UDOIT Accessibility Check within Canvas Course

Where the above Accessibility Check is built into the Rich Content Editor and is an easy way to correct accessibility issues for a single page, UDOIT will check your entire course site. Using UDOIT you can locate and correct accessibility issues anywhere within your course, including color contrast. UDoit will then provide you with a ‘U Fix It!’ button for each issue.

The UDOIT Accessibily Checker within Canvas with U Fix It buttons to correct color contrast.

UDOIT’s Color Contrast ‘U Fix It’ Tool

The tool to correct color contrast within UDOIT presents options to lighten or darken both the background and foreground colors until the 4.5:1 ratio is achieved. At that point, a submit button will become available to click and save the new settings.
UDoIt color contrast U Fix It tool to correct color contrast. Adjust desired colors until a 4.5:1 ratio is exceeded then submit to save new settings.
When the correct ratio is achieved and you are happy with your new colors, click the submit button now available. The submit button will not be available until the text color contrast is corrected.

Questions? We can help!

Check out our upcoming calendar of accessibility workshops!

Want to know more about accessibility? Contact us.