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)
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.
- Get the color values for background and foreground colors.*
- 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.
- 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)
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.
Color and Patterns
Use color AND varying patterns to convey the information.
Color and Symbols
Use color AND other labeling methods such as symbols to convey the information.
- Digital Color Meter tool (for Macs)This app, specific to Mac computers, allows you to find the color value for any color on your screen.
- Colorblind Web Page FilterEnter any URL to see what that webpage looks like with different types of color blindness.
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.