There are 2 main accessibility considerations when using color in your documents and web content:
- Color contrast: The difference in lightness/darkness between two colors (not differences in hue).
- Use of color to convey information: Examples of this are when a site uses color-coded graphics, or a red outline to highlight a wrong answer.
What are the requirements for color contrast?
- Text, icons, and important graphics must have sufficient color contrast. WCAG 2.0 AA require the following minimum color contrast ratios:
- 4.5:1 for paragraph text
- 3:1 for large-scale text (typically used for headings)
- WCAG also requires that we not use color alone, or visual characteristics, to convey information.
Below are examples of text with insufficient color contrast ratios, as well an example that meets the requirement:
Who does this affect?
People with a variety of visual impairments need sufficient contrast in order to read text. Cataracts, macular degeneration, and glaucoma are a few conditions that make it hard to differentiate between some colors.
Here’s an example of a colorful chart with text that lacks sufficient color contrast, and how it might appear to someone with cataracts:
Additionally, about 1 in 12 men (and 1 in 200 women) have color vision deficiency, or are colorblind. There are several types of colorblindness; although rare, some people only see in grayscale. When color is used to provide information, many people will not be able to use that information.
Deuteranopia is the most common type of color blindness, otherwise known as ‘red-green’ color blindness. Below is an example of a chart that uses color to convey information, and how it may appear to someone with deuteranopia:
How do I meet color contrast requirements?
There are lots of free tools to check color contrast. Here are a few:
- TPGi’s Colour Contrast Analyser (downloadable app)
- WebAIM’s Contrast Checker (web tool)
- WCAG Color Contrast Checker (Chrome extension)
Some tools require you to paste in hexadecimal codes, and some use eye droppers to identify colors. TPGi’s Color Contrast Analyzer is a downloadable application that can be used for both documents and web content. Browser extensions can only be used for web content, but are quick to access. Try a few tools to learn which ones best meet your needs.
Be sure to check color contrast for all types of digital content:
- Websites
- Documents
- Forms
- Applications
- Images containing text
- Graphics
- Videos
Tools to help you design for colorblind users:
- Colorblindly (Chrome extension)
- Colorblind Web Page Filter
- Chroma.js Color Palette Helper (for colorblind-safe combinations)
Does this mean we shouldn’t use color?
No, you can use color! In fact, for some folks, the use of color can improve understanding. Just remember, when you use color:
- Ensure your color contrast is sufficient.
- Test your color schemes with colorblindness simulators.
- Avoid using color alone to provide information. Incorporate patterns, text, or graphic symbols when possible.
Other considerations
- Link colors – If you design links without underlining, the color of the link text must have a 3:1 color contrast compared to surrounding (non-link) text to be accessible.
- Light text on a dark background (“dark mode”) – Although some people benefit from this combination, a greater portion of people find this more difficult to read. People who benefit from this combination often use settings or assistive tech to convert everything to dark mode. For this reason, it’s best to avoid light text on a dark background, except in small doses (such as decorative titles and call outs).