Color Contrast & Text Emphasis

Overview

Users should be able to quickly scan a page and locate its content. Clear differences in color help readers identify and understand information. Text must have enough contrast with its background to remain readable. In addition, color should never be the only way to show meaning, indicate actions, prompt responses, or distinguish elements. Relying solely on color can prevent people with color blindness or low vision from accessing the information.

✅Checklist for Emphasizing Text Accessibility

• Avoid using only color to show importance or status (combine color with bold and/or italic)

• Apply emphasis consistently and sparingly

• Ensure emphasis adds meaning or structure, not just decoration

• Ensure high contrast between emphasized text and background

• Use underline only for links — not for regular emphasis

• Changing font size is not an accessible emphasis tool

Selected Examples

Color Avoidance

Bold, italics and textual cues are often just as effective and avoid the numerous possible accessibility issues that color can create.

✅ Good Examples:

Field Trip: April 30
→ Uses bold for clear, scannable importance.

Please refer to the introduction before continuing.
→ Italics used for subtle emphasis.

Important: This week’s field trip is Tuesday, not Wednesday, as previously announced.
→ Use a textual cue like “Important” and bolding. 

Color Alone isn’t Used to Emphasize Text

Using color is fine, but it’s not just about choosing nice-looking colors—it’s about contrast, clarity, and avoiding color as the only means of conveying information. Some users (like those who are colorblind) may not perceive color distinctions. Therefore, use bold and/or italics together with color.

✅This week’s field trip is Tuesday, not Wednesday, as previously announced. (Note bold and italics.)

❌ This week’s field trip is Tuesday, not Wednesday as previously announced.

Use High Contrast

Some users can’t distinguish subtle differences between text and background. High contrast makes text stand out clearly.

❌ This week’s assignment will be due Tuesday, not Wednesday, as previously announced

Don't Underline

Only links should be underlined.

Don't Increase Font for Emphasis

Resizing the font is not a substitute for the use of proper heading tags, which are required for screen readers. Changing default paragraph font size in Canvas is generally not recommended at all. Many readers, both with and without visual impairments often permanently adjust browser settings or use other technologies for readability. Increasing font sizes can complicate these. Enlarged text may also negatively affect users on mobile devices. 

❌ Sample Header (paragraph text with font size increased to 18pt.)

✅ Sample Header (a heading tag “H2” applied)

More about this in the “Structured Headings” section of this document. 

Site Scanning Tools: UDOIT & Ally Course Accessibility Report

About: Entire site scans are great for a comprehensive look at all the issues on your site and track your improvements through the scores generated. One recommended strategy is to choose one of the accessibility core areas and use the tools' filters to target a selected one of them at a time. These tool are accessed by clicking the link on your course navigation menu. If not present, this article will show you how to enable: Manage Course Navigation Links.

Selected Content Scanning in Canvas Edit Mode: Ally, Canvas, and DesignPLUS Accessibility Checkers

About: These three tools to do scans, not of an entire course, but on individual items of Canvas content such a page, assignment description, announcement, etc. They can be accessed anytime you are in Canvas Edit mode. Many users find these tools useful for quick clean ups of selected content and in tandem with site scanning tools. Making a habit of using these to check and fix content every time you're working in Canvas will go a long way in the ultimate goal of creating content that's accessible for all from the start! 

1: Ally Accessibility Checker

WebPage:(Vendor) Ally WYSIWYG Accessibility

2: Canvas Accessibility Checker

Video (2:25, Pope Tech) Canvas's built-in Accessibility Checker demo *Includes great demo of fixing color contrast.

Webpages:
(Vendor): How do I use the Accessibility Checker in the Rich Content Editor?
(UW IT) Overview: Accessibility tools in Canvas *Page has a section on this as well as other tools for accessibility in Canvas.