Color Contrast

When providing in-page content to students using colors in headers, banners, or other web design components, it's essential that the colors used and the contrast between them is not agitating to the reader. Having significant color contrast (e.g., very dark text on very light backgrounds) helps make information easy to read.

Required Color Contrast

Individuals with low vision or color blindness can have difficulty reading text that does not adequately contrast with its background. Maintaining a high contrast also ensures your content is visible on different types of display (desktop monitors, televisions, projectors, etc.).

For example, are you able to read the following line of text?

Nobody wants to have to read this!

Checking for Contrast

WCAG 2.0 AA requires a contrast ratio of 4.5:1 for all text smaller than 18pt. Fortunately, it's easy to check for this ratio as you create content in Canvas. Simply click the 'Check Accessibility' button in the lower right corner of the Rich Content Editor: When editing in Canvas, you can check color contrast by click in the accessibility icon in the lower right hand corner of the rich content editor window.

When running the accessibility checker, any text in the editor that does not have a sufficient contrast will generate an error.

Conveying Information

When color alone is used convey information, individuals who are blind, low-vision, or colorblind may not be able to perceive what you are communicating. Relying on color formatting also makes your content less portable, since such formatting may be removed when your content is migrated or displayed in different places.

For example, the following list of readings is denoting the required readings in blue. If a student is blind, colorblind, or has low-vision, he/she may not see this blue text.

Reading List
Those listed in blue are required

As I Lay Dying
Slaughterhouse-Five
Hillbilly Elegy
The Republic

Communicating Correctly

Instead of using color to convey information include all information as text. Use color in the text as a supplementary aid to indicate meaning.

Let's revisit our previous reading list example to see how this would now look.

Reading List
Required readings are noted

As I Lay Dying
Slaughterhouse-Five (required)
Hillbilly Elegy
The Republic (required)