Color

Color and accessibility

What are the requirements for color?

There are 2 main accessibility considerations when using color in your documents and web content:

  • Color contrast: This is the difference in lightness/darkness between two colors (not differences in hue). Text, icons, and important graphics must have sufficient color contrast. 
  • Use of color to convey information: WCAG also requires that we not use color alone (or visual characteristics) to convey information. Examples of this are when a chart uses color alone, or a site uses color-coded text to convey information.

What is the required contrast ratio?

Here are the contrast ratio requirements for compliance with WCAG 2.0 AA. (Of course, if you can meet AAA that's great! But it's not required.)

Smaller text - 4.5 : 1 ratio or greater

  • If normal weight, smaller than 18 pt (24 px)
  • If bold, smaller than 14 pt (19px)

Larger text -  3 : 1 ratio or greater

  • If normal weight, equal to or larger than 18 pt (24 px)
  • If bold, equal to or larger than 14 pt (19 px)

Below are examples of text with insufficient color contrast ratios, as well an example that meets the requirement:

Four color combinations of text on blue backgrounds; only one has sufficient contrast

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:

A blurry, multi-colored chart with low contrast gray text is very hard to read.

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:

A multi-colored chart as seen by someone with colorblindness; it's hard to tell the difference between some colors.

How do I check color contrast?

There are lots of free tools to check color contrast. Here are a few:

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

Make sure someone without color vision can understand content. Tools to help you design for colorblind users:

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 your link text is not underlined, the color of the link text must have a 3:1 color contrast compared to surrounding (non-link) text to be accessible. This is in addition to the 4.5:1 contrast requirement for the link text against the background color. Learn about web-safe that colors can meet both contrast requirements.
  • 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).

More resources

About WCAG Success Criteria:

Use of color alone to convey info (video 5:14)

Topic 13 / Use of Color Alone to Convey Information [Open Captioned Video] [5:14 min]

Color contrast (video: 3:40)

Topic 14 / Color Contrast [Open Captioned Video] [3:40 min]

Was this page helpful?

Tell us what you think.