D5 & D6 - Color

D5 & D6 - Color

D5 - Color Contrast

Because sufficient contrast between foreground (text) and background is important, it's recommended that you NOT use colored or highlighted text to "liven" up your page; instead use  borders, images, and banners 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)

New RCE Accessible text on white background New RCE Accessible highlights for black text

The new color palette in Canvas will save custom colors you create (at the bottom of the palette), which can then be accessed in any of your course shells. So you can use WebAIM's Color Contrast Checker Links to an external site. to find a text or highlight color and save it to your palette. =-)

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 for large blocks of text. 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.).