Color and Color Contrast
Why is color important for accessibility?
Most sited users - even people with 20/20 vision! - need enough contrast between text and its background to be able to read your content easily. Having high contrast in a design is even more important for users who have low vision or who are colorblind. By following the WCAG 2.1 color contrast standards, we can make sure that all users can easily read our content.
- Paragraph text must have a contrast ratio of 4.5:1 (WCAG 2.1 AA).
- Large text must have a contrast ratio of 3:1 (WCAG 2.1 AA).
Don't use color as the only way to express meaning.
For any users who have any amount of color deficiency, or color blindness, color can be a big barrier in fully engaging with your content.
- Make sure all of your content can be understood without color.
- Make sure all links and buttons can be found without color.
- Check your color contrast.
How do I know if my content has good color contrast?
We're in luck! There are many free accessibility tools we can use to check the color contrast of our designs. In general, pairing a light color and a dark color will make your digital content the most accessible for most users. If you are planning on pairing colors that are similar in shade, it is best to check that they have enough contrast to meet accessibility standards.
The Color Contrast Accessibility Validator will check the color contrast of your published webpage, will tell you exactly which colors have low contrast, and suggest ways to fix it.
The WebAIM Contrast Checker is another excellent tool for comparing potential color combinations. Using the eye-dropper tool makes checking colors even easier.
How do I fix my content if the color contrast is bad?
After you have diagnosed your color contrast issues, it isn't difficult to correct your contrast. Simply change the color of your text, or the color of your background. You can also increase the contrast by increasing the size of your text itself.
Tip: If your text is over an image, add a solid color background to increase the contrast between your text and your background.
Change Color Contrast in Windows
How to Use High Contrast Color in PDF Files in Adobe Reader
Additional Resources
How to Check for Accessible Colors -- A11ycast #17 - YouTube
Color and Contrast - Accessibility for Teams
Color Contrast in Web Design: How to Stay Accessible (WCAG 2.1) - Altitude Marketing
Still Need Help?
Let us know! We are happy to help you make your content, documents, and webpages more accessible.
Please contact accessibility@uada.edu
