Skip to Main Content
Edmon Low Library
& Branch Libraries

Creating Accessible Learning

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 a type of color vision disability. Some may not be able to see certain colors, or may have a hard time differentiating between various colors. Make your content accessible by following accessible design practices for color contrast and color. 

Accessibility Guideline: Color Contrast

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

Examples of contrast can be seen in Figure 1. Most would have trouble reading the first line, however the same light foreground color with a black background is easy to read.

Figure 1. 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.

Figure 1

How to Check Color Contrast

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 by 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. Using color only to communicate this information will exclude individuals with color vision disabilities. (WCAG 1.3.3, A; WCAG 1.4.1, A)

How to Accessibly Use Color With Information 

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.

  • Last Updated: Oct 29, 2025 12:32 PM
  • URL: https://info.library.okstate.edu/creating-accessible-learning
  • Print Page