Ensure Adequate Contrast

Quick Links: | Why This Matters | What You Can Do | Instructions |

Contrast plays a vital role in making digital content accessible to all users. When text blends with its background or lacks sufficient distinction, it creates a barrier for many individuals, particularly those with visual impairments or aging eyes. Using proper contrast ensures everyone can easily read and interact with your content. This pattern is not only an accessibility best practice but also enhances overall user experience by improving readability and comprehension.

Why This Matters

Insufficient contrast occurs when the text and background colors do not differ enough in brightness or hue, making it hard to read.

  • Impact on Visual Impairments: Low-vision users may struggle to distinguish text from the background.
  • Effect on Color Blindness: Users with color blindness may find it challenging to differentiate certain color combinations.
  • Difficulty for Aging Eyes: As people age, their ability to perceive light and color diminishes, increasing the need for higher contrast.

Examples of poor contrast include:

  • Dark text on a dark background (e.g., navy blue text on a black background).
  • Light text on a light background (e.g., pale yellow text on a white background).

Two buttons side-by-side. The first button, labelled "Good contrast" is very legible, using dark text on a light background. The second button, "Bad contast," uses dark text on a dark background, making it difficult to read.

What You Can Do

Adopting high-contrast color combinations ensures text is easily distinguishable from the background.

  • Use dark text on light backgrounds or vice versa for better readability.
  • Use the Ally Course Report to review gaps on contrast issues.
  • Leverage Canvas's built-in Accessibility Checker to catch and correct contrast issues directly within the Rich Content Editor.
  • Automated tools like the WebAIM Color Contrast Checker are also helpful for quick spot-checks of color combinations.

This practice not only supports users with visual challenges but benefits everyone by enhancing the clarity and usability of your content.

Instructions

To ensure adequate contrast in your Canvas course, do the following:

  1. From the Canvas dashboard, open your course.
  2. Navigate to the page or content you wish to edit.
  3. Select Edit to open the Rich Content Editor (RCE).
  4. Highlight the text you want to style and select Text Color from the toolbar.
  5. Choose a color that contrasts well with the background. For dark backgrounds, select a light text color; for light backgrounds, choose a dark text color.
  6. Use the built-in Accessibility Checker (found in the RCE toolbar) to identify and resolve potential contrast issues.
  7. Use the Ally Course Report from the course navigation menu and review any flagged contrast issues. Follow the recommendations provided.
  8. Save your changes by selecting Save or Save and Publish.

By ensuring high contrast in your content, you’ll create an inclusive learning environment for all students.

We’re Here to Support You—Don’t Hesitate to Ask for Help

Still need help? Drop in to Academic Technology's live faculty support room via Zoom, schedule a one-on-one consultation with an instructional designer, or reach out to the Technology & Learning Program to ensure your courses are fully accessible.

Your commitment to creating accessible content in Canvas makes a world of difference to all students, ensuring that everyone has equal opportunity to do and dare.

Print Article