Color Contrast in Canvas

Using color thoughtfully in course materials is about making your content accessible to all students, including those with visual impairments or color blindness. Some color choices can make important information hard to read or completely invisible to some students. By designing with accessibility in mind, you create materials that engage everyone and support learning.

This guide explores tips and steps for how to ensure proper color contrast and readability in Canvas. 

 

Quick Tips

  • Use high-contrast colors
  • Never rely on color alone to communicate meaning
  • Add bold, underline, or icons to reinforce important content
  • Run Canvas Accessibility Checker before sharing your content
 

How to Ensure Strong Contrast

Guidelines

  • Normal text: Minimum contrast ratio 4:5:1
  • Large text (18pt or 14 pt bold+): Minimum contrast ratio 3:1

Step-by-Step to Fix Contrast in Canvas:

  1. Select the text that is hard to read.
  2. Open the Font Color menu.
  3. Choose a darker color or use black for maximum contrast. 
    1. A screenshot of the rich content editor in Canvas with the font color menu selected, displaying a palatte of options. The font menu is called out in a red box.
  4. Preview your change on a white background.
 

Avoid Using Color Alone to Convey Meaning

Bad Example (Color Only):

Find the important vocabulary words in red: photosynthesis, mitosis, osmosis.

Good Example (Multiple Cues):

Find the important vocabulary words: photosynthesis, mitosis, osmosis 

Step-by-Step Fix:

  1. Highlight the important words.
  2. Choose Bold, Italics and/or Underline from the menu.
  3. Optionally, keep the color for extra emphasis. 
    1. A screenshot of the rich content editor in Canvas with the bold, italics, and underline font options selected and called out in a red box.
 

Use the Canvas Accessibility Checker

Canvas can automatically check your document for accessibility issues, including color contrast. 

Step-by-Step:

  1. Go to the Accessibility Checker from the bottom of the Rich Content Editor. If the page has identified errors in accessibility, it will indicate the number of issues.
    1. A screenshot of the rich content editor in Canvas with the Accessibility Checker image at the bottom displaying a number one. The icon is called out in a red box.
  2. The Accessibility Checker panel appears on the right with the identified issues and recommended solutions. For example, choose a different color to ensure contrast. Choose Apply.
    1. A screenshot of the Accessibility Checker in Canvas indicated one issue with color contrast and suggesting that the text color be changed to display a minimum contrast ration of 4:5:1. An apply button appears at the bottom to save changes.
  3. Once completed, the Accessibility Checker will indicate that there are no accessibility issues detected.
    1. A screenshot of the accessility checker message indicating that there are no accessibility issues detected.
  4. Be sure to Save or Save & Publish at the bottom of the page to preserve changes.
 

Conclusion

Thoughtful use of color in Canvas helps ensure all students can access and understand your materials, not just those who can perceive certain colors. By following these best practices—using high contrast, reinforcing meaning with multiple cues, and leveraging the Accessibility Checker—you can create engaging and professional course content. 

© 2026 Kent State University All rights reserved.