Color: Contrast & Meaning

• Dealing with Color
• Practice

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.

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.

Color is another formatting element where the built-in accessibility checker in the RCE is quite helpful. It will alert you to the presence of text with insufficient contrast. To fix it, hold your mouse down on the "magic circle" in the palette provided and drag it to another color. Once a color has sufficient contrast, the Apply button will turn from inactive gray to active blue. Click it and save the page.

The graphic below shows you which default colors in the Canvas RCE have appropriate contrast. Additionally, 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.

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

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, but aren't limited to:

• 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.).

Color Demo