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)

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

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

The following image is a pie chart that uses only color to convey meaning for the 1st and 2nd quarter wedges. By adding annotations and texture, as shown in the 3rd quarter wedge, readability is increased.

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

Color is another thing the Canvas Accessibility Checker is good at. If there is any color in use on a page—either text or highlighting—run the tool to check for sufficient contrast.

PopeTech will alert to insufficient contrast and includes a slider tool to increase the contrast.

One caveat: the WAVE interface (as of Oct. '19) is interpreting the default blue for Canvas links as insufficient contrast. However, we've used two other color contrast checkers which do not find the contrast to be problematic.