General Information
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.
is a Firefox browser plug-in.
Unless otherwise noted, these accessibility guides were created by Accessibility Librarian Amy Wolfe for CUNY and are licensed under a Creative Commons Attribution-Non Commercial-ShareAlike 4.0 International License. If you re-use, remix or link to this guide, it would be appreciated if you could notify the creator Accessibility Librarian Amy Wolfe.