Teaching and Learning Resource Center

Fix Text Contrast

Issue

This is how Ally describes this issue:

  • The HTML content contains text with insufficient contrast.
  • The image has contrast issues.
  • The document has contrast issues.

One way to think about contrast is how much something in the foreground, like text or other visual elements, stands out from the background color or image. Some factors that can affect contrast include a combination of how big the text is (i.e., font size), how thick the font is (e.g., regular vs. bold), and what colors are used.

Imagine this – you are watching a TV show and have closed captions turned on, but the caption text is dark gray, and the background box underneath is black. In other words, the text is barely distinguishable from the background box. That would be a contrast issue.

Tip for new content: The Accessibility Checker Inside Carmen’s Rich Content Editor (RCE) identifies text-contrast issues and suggests colors that meet the expected minimum contrast ratio. Using the checker while creating or editing a CarmenCanvas page or announcement can help you correct issues before publishing. If the issues were missed during editing, Ally also checks for text with insufficient contrast.  

Quick Fix

Improve the contrast of text in CarmenCanvas.

To apply the quick fix:

  1. Locate the issue named “The HTML content contains text with insufficient contrast.”  
  2. Select the issue to view a new page listing affected course content.
  3. Select the orange or red Ally Accessibility Indicator icon next to one of the issues.
  4. The contrast issue will appear on the left with a red outline, and Instructor Feedback will be on the right of your screen.
  5. Ally will recommend accessible alternatives to use. Select a color, and then select Apply.
  6. Close the issue and move to the next item in your list.

Want to preserve your color scheme? Ally may offer a limited set of neutral colors. To explore additional color options that meet contrast requirements, edit the content in the CarmenCanvas RCE and use its Accessibility Checker.

When You Have More Time

Fix contrast issues in documents and images. Non-text content, such as pictures, graphs, and charts, may require additional effort to identify and remediate contrast issues. You can confirm accessible contrast using a web-based tool, like WebAIM’s Contrast Checker or contact the IT Help Desk to install a free desktop app with color picker functionality, like the Colour Contrast Analyser.  

When you create your source materials, such as a Word document or a PowerPoint slide deck, the built-in Accessibility checker/Assistant may warn you if there are hard-to-read text contrast issues and offers recommended actions that you can quickly apply.  

Caution

Avoid images of text whenever possible because they can create accessibility and readability barriers. Replace them with actual text. If an image of text is necessary, provide alternative text or an equivalent visible-text description that communicates the same information.

Related Guides