Skip to Main Content

Creating Accessible Learning: Color and Color Contrast

Why It Matters

Not all individuals see colors the same. Over 7% of the U.S. population has some sort of color vision deficiency. Some may not be able to see certain colors, or may have a hard time differentiating between various colors.

Accessibility Guideline: Color

Avoid using color as the only visual way to convey information, such as in charts and graphs, or as a way of providing direction. (1.3.3, A; 1.4.1, A)

Two of the same pie charts are side-by-side show the difference in how colors would appear to someone with full color vision compared to someone with deuteranopia. Colors are similar and hard to distinguish.

In these example pie charts, we see how the same chart would look to someone with full color vision compared to someone with deuteranopia. Students will have difficulty differentiating between the colors, so another method of labeling is required.

If color is used to communicate information visually, do one or more of the following:

Color and Text

Use color AND text to convey the information.

Two of the same pie charts are side-by-side. Each chart has a key at the bottom to differentiate colors as well as text labels affixed to each pie chunk to assist with identification. The second chart shows how the colors would look to someone with deuteranopia, illustrating the importance of text labels when using color to provide info.

Color and Patterns

Use color AND varying patterns to convey the information.

Two of the same line graphs are side-by-side, each with a key at the bottom to differentiate colors, as well as each line bearing a different pattern to assist with identification. The second one shows how the colors would look to someone with protanopia, emphasizing how the varying patterns ensure they are still able to read the line graph properly.

Color and Symbols

Use color AND other labeling methods such as symbols to convey the information.

Two of the same forms are side-by-side, each with four fields for entering information. The second form shows how the colors would look indistinguishable to someone with Protanopia, illustrating the importance of using other labeling methods in addition to color. The third and fourth boxes for each form display an error, but the letter x within a circle is displayed next to each of these errors so that someone with Protanopia can see that they have made an error.

Accessibility Guidline: Color Contrast

Background and foreground color combinations should have high enough contrast for people to see it. (1.4.3; AA)

The phrase, Can you read this?, written twice to show the importance of color contrast. The first is light purple and difficult to read, while the second is the same light purple but with a black background and easy to read.

Examples of contrast can be seen in "Can you read this?" box.

Most would have trouble reading the first line, however the same light foreground color with a black background is easy to read.

Color Contrast Tool

Test color contrast using WebAim's Contrast Checker.

  1. Get the color values for background and foreground colors.* Convert the color values to HEX if needed.**
  2. Go to WebAim's Contrast Checker. Plug the HEX values into the foreground and background fields.
  3. Ensure the contrast ratio meets WCAG Level AA at a minimum.

*Locating Color Values

Color values most commonly follow 3 models, each based on medium (digital or print) and how colors are mixed and presented.:

  • CMYK: Cyan, magenta, yellow, black. Used with print products.
  • RGB: Red, Green, Blue. Used with digital products.
  • HEX: Hexadecimal. Used with digital products. Hex is the shorthand for a color's RGB value.

The process of finding color value will vary from program to program, however typically you can highlight the text or item, click on the program's color option, and locate the color value.

In Microsoft programs, you can find the color value by highlighting the item, selecting the color drop-down, selecting “More Colors,” and clicking the “Custom” tab. The RGB code is listed there.

**Converting to HEX:

To convert your color value to HEX, use a color converter tool. You can easily find one by googling “______ to HEX,” but filling in the blank with the color value you need to convert.

You may also use Google's suggested color converter tool.