One of the most overlooked issues flagged by UDOIT is insufficient color contrast between text and background colors. While it may seem like a design choice, poor contrast can make content unreadable for students with low vision or color blindness.
Color contrast refers to the difference in brightness between foreground (text) and background colors.
Below are examples of poor color contrast:
Common ways to avoid contrast issues:
- Don’t use light-colored text on a white background (e.g., yellow on white)
- Don’t use low-contrast colors in tables, buttons, or banners
- Don’t add custom HTML/CSS with decorative but inaccessible color combinations
UDOIT will flag these combinations, so you can adjust them for readability. Use high-contrast color pairings like black text on a white background. Tools like the WebAIM Contrast Checker can help you test your color choices. Finally, in Canvas, use built-in styles and avoid manual coloring (or highlighting) unless you're sure it passes the contrast test.
Learn more about color contrast and accessibility.
Impacted Population
- Users with low vision or color blindness
Summary
- Aim for a contrast ratio of 4.5:1 for normal text
- Avoid light-colored text on light backgrounds
- Use Canvas styles instead of custom colors