How can choices in background and text color affect accessibility?
Many people need good contrast between text and the background color behind it to be able to read the text. If a non-textual element, such as an icon or annotation, is also key to understanding the information presented on the page, that item must similarly have good contrast with its background color.
This article answers the following questions about how to ensure the text in your document meets basic requirements for color contrast:
Tip: For complete steps to add and format text in Canvas, see How do I add and modify text in the Rich Content Editor as an instructor? (opens new window) or How do I add and modify text in the Rich Content Editor as a student? (opens new window).
What are contrast ratios?
When one color is placed on top of another, the contrast ratio is the numerical value that describes the relationship between these two colors. The ratio is a measurement of how the brightest color (e.g., white) compares to the darkest color (e.g., black).
The contrast between background and foreground colors should have a ratio of 4.5:1 or higher. Leaving the defaults of the editor is best - black text on white, with a ratio of 21:1.
Text that is larger and has wider character strokes is easier to read at lower contrast. Large text, defined as text in an 18 point or larger font, or bold text in a 14 point or larger font requires a slightly lower contrast ratio, 3:1.
The table below contains examples of text on backgrounds with varying contrast ratios, and indicates whether the level of contrast would be adequate.
How do I change the text color?
To edit the text color in the Rich Content Editor:
- Select the Text color button from the editor's toolbar. The Text color button looks like a letter A with an underline: A.
- Select a color, such as Dark Red or Navy Blue. If the color you would like to use is not shown among the default color options, select the Custom color button, which looks like a paint palette. This will display a Color Picker you can use to set the color as desired.
How do I change the background color?
To edit the background color of text in the Rich Content Editor:
- Select the Background color button from the editor's toolbar. The Background color button looks like a highlighter marker with a line under it.
- Select a color, such as Light Yellow or Light Red. If the color you would like to use is not shown among the default color options, select the Custom color button, which looks like a paint palette. This will display a Color Picker you can use to set the color as desired.
How do I check my color selection for adequate contrast?
In most cases, color contrast issues will be obvious. If you aren't sure, use the Rich Content Editor's Accessibility Checker (opens new window) to check your text.
Look for errors.
Pictured above is an example where a purple background has been used on some black text, making it hard to read. The Accessibility Checker is displaying 1 error, warning about the color issue.
Select the Accessibility Checker button.
Select a new text color, then Apply.
The Accessibility Checker window will display a recommendation to change the text color.
- Under Change text color, use the color picker to select a new text color that meets the contrast requirement with its background color.
- Select Apply.
View success message and edited text.
- The Accessibility Checker window will display balloons when No accessibility issues were detected. Select the X (Close) button to close the window.
- You may view your modified text in the editor.