Color contrast
Color contrast
Web A11y Checklist
- Overview
- Where do I start?
- Build structure/content
- Provide alternative means of accessing information
- Use color appropriately
- Make tables/docs accessible
Color is a powerful design tool that helps convey meaning and draws attention to content. It must be used thoughtfully so it does not present a barrier to people with disabilities, such as those who are colorblind, have low vision, or use grayscale monitors.
Appropriate use
Text on a solid background: The Web Content Accessibility Guidelines require that text—and images of text—provide a contrast ratio of at least 4.5:1. This is ratio between the foreground and background colors.
Non-text elements: For all other elements like buttons, images, links, and form fields, the same rules regarding color contrast apply.
How to test for compliance
You will need to use an automated checker like WebAIM’s WAVE Browser extension. This is available for Chrome, Firefox, and Edge browsers. When you click on the plug-in, an overlay will appear with all of your issues.
When using an automated checker, it is possible to get false positives, in which case you will need to manually verify that they are true issues.
Additionally, you should check any text in images and any text above an image (like a call out in a hero banner).
Common mistakes
Links: A common mistake we see often is the color of hyperlinks on your page. In many cases, this is set in the .CSS file as part of the template, and is used against multiple backgrounds without consideration for all new colors.
See the Rutgers Color Contrast Look Up for which color combinations meet standards.