ULEARN Accessibility Guide Insufficient Text Color Contrast With the Background

Text color should be easily viewable and should not be the only indicator of meaning or function. Color balance should have at least a 4.5:1 ratio for small text and 3:1 ratio for large text.
Warning: using UDOIT to fix one section of text may invalidate the contrast in nested sections of text that are not the same color.

User Experience

What You May Experience

Three examples of text with insufficient color against the background, making it difficult to read.

What Students May Experience

There are multiple types of color vision deficiency, each causing issues with seeing different colors. Explore the following accordions to experience how people with different types of color blindness may see the same text.

Red-Weak/Protanomaly

Simulation of how a person with red-weak (protanomaly) color vision perceives colored text, with reds appearing faded or shifted toward green.

Blue-Blind/Tritanopia

Simulation of how a person with blue-blind (tritanopia) color vision perceives colored text, with blues appearing greenish.

Monochromacy/Achromatopsia

Simulation of how a person with monochromacy (achromatopsia) perceives colored text, with all colors appearing as shades of gray. No color is visible, only differences in brightness.

Why This Matters

Students with low vision or other visual impairments may struggle to read text that lacks sufficient contrast. Those with color vision deficiencies might not be able to distinguish certain colors or may see colors that blend together, making text difficult to perceive.

High contrast between text and background is essential for readability and comfort. It helps all users, regardless of lighting conditions, screen quality, or visual ability, to read content without strain or frustration. Text with strong color contrast remains legible across devices and environments, improving the overall user experience. By ensuring adequate contrast, educators support inclusive design practices that make content accessible to all students.

Experience the difference a tweak of color contrast can make!

How to Fix It

Fix in Canvas: Canvas' native Accessibility Checker flags text with insufficient color contrast. Select a color in the Change Text Color option. The Accessibility checker will not let you apply a new color until the selected color meets the appropriate contrast ratio.
Fix with DesignPLUS: When editing a page with DesignPLUS, text with insufficient color contrast will be flagged in the Accessibility / Usability tab. Use the slide in the Contrast Checker tool to lighten or darken the text, or select the white or black text option to change the colors. View the text instance preview, contrast ratio, and indicators of fail or pass for normal and large text size standards. Once a new color that meets standards has been selected, select the Apply button to update the text instance in the editor.
Fix in UDOIT: In the UDOIT interface, whenever you encounter an "Insufficient Text Color Contrast With the Background" error, you can change the background or text color. Use the arrows to make text or background lighter or darker, or choose from a preset color picker. Adjust the color until you meet an appropriate contrast ratio: WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Remember to "Save" your changes before moving on to the next issue.
- A checkbox option, “Apply to all related issues,” allows you to fix multiple color contrast issues at once. When selected, the fix is applied to all issues that share the same text color and background color combination — regardless of the specific text content.

ULEARN Navigation

Last Updated: Jul 24, 2026, 8:55 AM

Created with DesignPLUS

UDOIT Advantage