Color Summary

Listen to this page content by selecting the below play button.

Making content distinguishable is essential for learners to decipher and interact with subject matter. This is especially true for low-vision and color blind users and is promoted by providing sufficient color contrast between foreground (text) and background. The ability to measure contrast ratios in various media types is thus fundamental for course content creators. Analyzing color contrast is conducted using free tools such as the Colour Contrast Analyser by TPGi.

Overview

Provide sufficient color contrast between the background and foreground of your content and avoid using color as the only way to convey meaning. Be aware that Color degradation can occur when exporting presentation materials to video formats. Play the following video tutorial to learn more about how to digitally measure color contrast ratios.

Colour Contrast Analyser Tutorial with transcript

Best Practices

Accompany colored content with other visual indicators, such as an asterisk with an explanation of how color is being used to convey meaning.
Avoid using red and green to convey meaning or as the only means to differentiate content (Users who have color-blindness benefit when information conveyed by color is available in other visual ways).
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (regular text) and 3:1 for large and linked text. Large text is described as 18pt or 14pt bold.
Hyperlinked text can have a contrast ratio of 3:1.
Color contrast ratios apply to bCourses (Canvas) Pages and other HTML content (such as assignments, announcements, etc).
Use the following tools to measure contrast ratios:

Use the following tool to simulate color blindness

- Toptoal Color Blind Filter

Example 1

Gray Background
Fail	Pass
Light blue font on gray background	Dark blue font on gray background

Example 2

Dark Blue Background
Fail	Pass
Black font on dark blue background	White font on dark blue background

Reading Check

Use the Reading Check link below to view questions related to this workshop.

Reading Check

Sources

WCAG 2.0 Guidelines 1.4.1 A and 1.4.3 AA
Penn State Accessibility
UC Berkeley Web Access
W3.org