Canvas@Illinois, Accessibility Checker Color Contrast
When using colored text, it's important to choose colors that maintain a high contrast with the page's background. Users with low vision or particular types of colorblindness may have trouble differentiating between similar colors, so the Accessibility Checker in Canvas will flag colored elements with low contrast ratios.
When a low contrast ratio is detected, the Accessibility Checker will display a description of the issue, a box to input a new RGBa color code, and a selection panel and sliders to choose a new color visually:
Once you've chosen a new color, click the Apply button to save the changes. The button will not be clickable if the new color is also at an unacceptable contrast ratio.
Resources:
- W3 Schools: RGB Color Codes
- Video tutorial: Accessible color contrast requirements with examples
- WebAIM Color-blindness
- WebAIM Contrast Checker
- Canvas Accessibility Checker Guide
If you're interested in enhancing the accessibility and inclusivity of your course, CITL's Universal Design for Learning (UDL) Team is here to help. For more information, contact us at CITL-UDLTeam@illinois.edu