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 Guidline: Color Contrast

Background and foreground color combinations should have high enough contrast for people to see it. (WCAG 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. Follow the steps below, or watch the video for an example.

  1. Get the color values for background and foreground colors.*
  2. Go to WebAim's Contrast Checker. If you have HEX color values, paste them into the corresponding fields. If you have RGB or HSL color values, click the color box next to the HEX field to open the Color box and enter the values there. If you have CMYK values, convert them to another color value using Google's Color Picker and then enter them.
  3. Once color values are entered, the Checker will show you if the contrast is accessible for normal size text, large text, or graphical objects and UI components. Ensure the contrast ratio meets WCAG Level AA at a minimum.

This quick video will walk you through the steps of checking for accessible color contrast using WebAIM’s Color Contrast Checker tool.

*Locating Color Values

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

  • RGB: Red, Green, Blue. Used with digital products. (Ex: 139, 156, 12)
  • HEX: Hexadecimal. Used with digital products. Hex is the shorthand for a color's RGB value. (Ex: EC9533)
  • CMYK: Cyan, magenta, yellow, black. Used with print products. (Ex: 0%, 37%, 78%, 7%)

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 RGB color value by highlighting the item, selecting the color drop-down from the "Format" tab, selecting “More Colors,” and clicking the “Custom” tab.

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. (WCAG 1.3.3, A; WCAG 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.

More Resources

Test Your Knowledge

Take this quick, 4-question quiz to see how much you can recall about best practices for ensuring accessibility with color! Note, this quiz is just for fun and is 100% anonymous.