D5 & D6 - Color

D5 - Color Contrast

Because sufficient contrast between foreground (text) and background is important, it's recommended that you NOT "liven" up your page with colored or highlighted text; instead use images for visual interest.

However, there may be times when colored or highlighted text is appropriate. Changing colors for text and background (highlighting) in Canvas is done using the Text Color and Background Color icons in the Rich Content Editor.

The graphic below shows you which default colors in the Canvas RCE have appropriate contrast.

āœ“ = accessible colors    o = colors that are accessible only for large text (Header 2, or 24 px and larger)

Accessible palette colors on white and black backgrounds

If you stick to the top row of colors on a white background (bottom row on black), you're always within the guidelines. 

Although text colors with appropriate contrast against a black background are shown, it's HIGHLY discouraged to use light text against a black/dark background. It tires the eye quickly and can produce a shimmering effect that's hard to read.

D6 - Color and Meaning

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

It's OK to use color to convey meaning as long as that meaning is indicated in some other way as well (italics, bold, a symbol, etc.).