Color contrast refers to the difference in brightness and hue between foreground (e.g., text) and background elements. Strong contrast is essential for legibility and accessibility, especially for individuals with low vision or color vision deficiencies.
Color can enhance the visual appeal of your course, but it must be used thoughtfully. Poor color choices can make your content difficult to read or interpret. For color to support, not hinder learning, it must be perceivable to all users.
What is WCAG and Why It Matters
The Web Content Accessibility Guidelines (WCAG) are the global standard for evaluating and understanding digital accessibility. The standards are set by the World Wide Web Consortium (W3C). In this international public-interest non-profit organization, Member organizations, a full-time staff, and the public work together to develop Web standards.
CSU Accessibility Requirements
The California State University (CSU) system is committed to digital accessibility for all users. Previously, the CSU system adhered to WCAG 2.0 standards (published in December 2008). Currently, the systemwide CSU workflow is focused on meeting the WCAG 2.1 AA guidelines, but at an accelerated pace to improve accessibility across websites, learning management systems, and digital content. Everyone across the CSU system is encouraged to begin aligning their digital materials with WCAG 2.1 AA standards as soon as possible to ensure accessibility.
WCAG 2.1 AA Contrast Requirements
The WCAG 2.1 Level AA guidelines define minimum contrast ratios to ensure readability:
- Normal text (under 18pt or 14pt bold): Must have a contrast ratio of at least 4.5:1
- Large text (18pt / 24px or larger, or 14pt / 18.66px bold): Must have a contrast ratio of at least 3:1
To meet the more stringent Level AAA standards:
- Normal text: Requires 7:1
- Large text: Requires 4.5:1
Evaluating Color Contrast
There are many tools available to help you evaluate color contrast.
Colour Contrast Analyser is a downloadable tool with an eyedropper function for sampling colors directly from your screen. It is available in Self-Service+ (Mac) and Software Center (Windows)
If you use a different tool or browser extension, ensure it clearly displays the color contrast ratio and, ideally, offers the specific color hex code
Best Practices for Color Use and Contrast
- Use sufficient contrast between text and its background to support readability and accessibility.
- Check the contrast of all custom colors used across your digital content to ensure they meet accessibility standards. This includes, but is not limited to:
- On-screen text and headings in web content and learning platforms
- Background colors behind text blocks
- Visuals such as charts, graphics, and infographics that include text or color-coded information
- Documents shared internally or externally, including:
- Emails
- PDFs
- Word documents
- Excel spreadsheets
- PowerPoint presentations
- Forms or templates used for administrative processes
In conclusion, applying appropriate color contrast when creating content, whether course materials, emails, or administrative documents, and making simple design choices, such as checking contrast before sending or publishing, can significantly improve access for all users.
