Skip to main content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.
What's on this page about color and color contrast?
Accessibility Information on Color and Contrast
Don't shy away from using colors but use color intelligently. Having a general understanding of color and color contrast is important to help communicate in an accessible manner.
"Color is an important asset in design of Web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color." - W3C Working Group Notes
Why using colors accessibly is important
- Choosing accessible colors for your documents and site is important.
- Colors affect the readability of your document and site for all users, not just those with vision impairments.
- The only people for whom the color choices don’t matter are those using screen readers.
- Some people cannot read text if there is not sufficient contrast between the text and background.
- High contrast is required by some people with visual impairments, including many older people who lose contrast sensitivity from ageing.
- While some people need high contrast, for others — including some people with reading disabilities such as dyslexia — bright colors are not readable. They need low luminance.
- The WCAG 2.0 require that color combinations meet clearly defined contrast ratios. In order to meet the guidelines at Level AA, text or images of text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).
How to use color accessibly
- Choose colors with sufficient contrast.
- Check the color contrast of your items to make sure they are accessible.
- Don’t use color as the only way to communicate information, always make sure meaning is conveyed in multiple ways.
- This is true for the main text of your document, links in blocks and images of text.
- In the case of links, use another identifier such as bold or underline to indicate a link verses using color alone.
- Run your site and documents through color contrast checkers to make sure the contrast ratio is good.
- To meet basic guidelines (Level AA) text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).
- WCAG Contrast Checker is a Firefox browser plug-in.
This plug-in checks the compliance of contrast levels of foreground and background color combinations based on the requirements of WCAG 2.1.
- Color Contrast Analyzer is a Chrome browser plug-in.
This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page.
Experience Color Blindness
A11Y Color Blindness Empathy Test
Use this browser add-on to see what you site looks like to people with various types of color blindness and vision loss.