When Color Helps—and When It Hurts

Reading with Tabs | Video | Quick Check

Purpose of Color Awareness

Color, like images, can add visual appeal to your pages, heighten professionalism, and provide focus for important information. In order for color to work, however, it needs to be perceivable. Problematic color choices can affect readers with low vision or color blindness.

Optional: How do the Colorblind see the World?

Please review the following three tabs to develop your color-awareness:

Color Confusion

Learners who are blind, low-vision, or colorblind will not be able to differentiate between the content you are trying to emphasize or highlight if you use only color to convey meaning. Problematic examples include:

Highlighting required fields in forms
Directing students to "Pay special attention to the learning concepts in blue"
A pie chart sectioned by color

Avoid using color as the sole means of conveying information. The following example intentionally uses color alone and includes low-contrast text to illustrate common pitfalls:

All green items are due on Mondays, orange items on Wednesdays, and red items on Fridays. (Accessibility note: the directions and table intentionally rely on color alone.)

Color Confusion Table
Week 1	Week 2	Week 3	Week 4
Discussion	Discussion	Discussion	Discussion
	Quiz		Quiz
			Final Project

Use More Than Color

Color can enhance the experience, but contrast must be sufficient, and color should never be the only cue. Use redundant channels such as both shape and color:

Items marked with a green triangle are due on Mondays, with a blue circle on Wednesdays, and a red square on Fridays.

Chart Icons
Categories	Week 1	Week 2	Week 3	Week 4
Discussion
Quiz
Final Project

It is fine to use color when the same meaning is also available through visible text, labels, shapes, symbols, or patterns. Bold or italic styling alone is not a dependable second cue.

Use Defaults or Checkers

Color Contrast

When possible, use default text colors. If you choose custom colors for headings or emphasis, check contrast with a free online tool. You’ll need the hex code of your colors.

Useful tools:

Color Contrast

Four rainbow palettes: typical color vision and simulations of three color vision deficiencies — Varieties of Color Blindness Description, Image source: Color Matters, What is Color Blindness?

Using color can interfere with learning when the color contrast—the difference between background and text or image—is not sufficient. This affects all sighted users and can be especially difficult for readers with low vision.

Color can also be an issue when it is used to convey information. Color blindness involves the color-sensing cells in the retina and occurs in several forms.

Default text and theme-aware components are the safest starting point. If color supports a real purpose, use the Text Color and Background Color tools carefully and check the exact foreground-and-background combination.

The graphic below is an example of contrast results for one Canvas palette. Because themes and interfaces change, use a current contrast checker for the page you are building.

✓ = accessible colors o = colors that are accessible only for large text (Heading 2, or 24 px and larger)

Canvas RCE color charts with symbols identifying which colors are accessible

Do not force a light or dark scheme for everyone. Let the Canvas theme respond to user preferences, and verify that any custom colors remain readable in the context where they appear.

Color Contrast Video

This video outlines color contrast requirements to ensure Canvas content, images, and graphics are more accessible and easier to evaluate against WCAG contrast requirements. (Length: 4:26)

To access captions or change playback settings:

Select “Subtitles/CC” to turn on captions in English or other available languages.
Adjust playback speed in Settings to slow down or speed up the video.
If you experience loading issues, watch Color Contrast on a separate page.

Quick Check

Which option best aligns with accessible color use in Canvas?

Use color alone (e.g., red items are late) to convey meaning—everyone recognizes colors.: Color should never be the only cue. Pair it with text, symbols, or patterns so meaning is conveyed to all readers.
Provide redundant cues (text/icons/shapes) and ensure sufficient contrast when you use color.: Correct: Redundancy plus adequate contrast supports readers with color vision differences and low vision.
Choose bright colors for emphasis; contrast checkers aren’t necessary if the text looks readable.: Perceived readability is not reliable. Use contrast checkers and stick to accessible defaults when possible.

Connection

Color is one of many design choices that shape how information is perceived. Like headings, color works best when it supports structure. Using color thoughtfully reinforces a broader goal: making meaning clear without relying on a single visual cue.