Improve Color Contrast in Canvas

This article will explain why color contrast matters for accessibility and show you how to check and fix contrast issues in your Canvas course using built-in tools.

Quick Links: | Importance of Contrast for Accessibility | Choosing Accessible Color Combinations | Fix Color Contrast Issues in Canvas |

Importance of Contrast for Accessibility

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 practice improves accessibility and enhances overall readability and comprehension.

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

• Low vision: Users may struggle to distinguish text from the background.
• Color blindness: Certain color combinations may be indistinguishable.
• Aging vision: Reduced light and color perception increases the need for higher contrast.

Examples of poor contrast include:

• Dark text on a dark background (for example, navy text on black).
• Light text on a light background (for example, pale yellow text on white).

 

Choosing Accessible Color Combinations

High-contrast color combinations make text clearly distinguishable from the background.

• Use dark text on light backgrounds, or light text on dark backgrounds.
• Use the Ally Course Report to identify contrast issues in your course.
• Use Canvas’s built-in Accessibility Checker within the Rich Content Editor to review and correct contrast problems.
• Use tools such as the WebAIM Color Contrast Checker to test specific color combinations before publishing.

Improving contrast benefits students with visual challenges and improves clarity for everyone.

Fix Color Contrast Issues in Canvas

1. From the Canvas Dashboard, open your course.
2. Navigate to the page or content you want to edit.
3. Select Edit to open the Rich Content Editor.
4. Highlight the text you want to adjust.
5. Select Text Color from the toolbar and choose a color that clearly contrasts with the background.
6. Select Accessibility Checker in the Rich Content Editor toolbar and review any flagged issues.
7. Open the Ally Course Report from the course navigation menu and review flagged contrast issues. Follow the recommendations provided.
8. Select Save or Save and Publish.

Ensuring strong color contrast helps create an inclusive learning environment where all students can access course materials comfortably.

 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.
  
 Help us improve our Knowledge Base! Click Yes or No below, then let us know what worked — or what didn’t. Your feedback helps us improve our content and provide the best possible support.