Contrast & Color Accessibility

In this tutorial, you’ll learn how color and contrast can create more accessible documents, presentations, and web pages.

The Definition of Contrast

Contrast is a measure of the difference in perceived “luminance” or brightness between two colors.

This brightness difference is expressed as a ratio ranging from 1:1 (e.g., white text on white background) to 21:1 (e.g., black text on white background).

Accessibility Guidelines for Contrast & Color

Based on Web Content Accessibility Guidelines (WCAG) 2.1 Level AA:

• Contrast Ratio between text and its background must be:
  • 4.5:1 for normal (body) text (Contrast Minimum)
  • 3:1 for large text
• Never use color alone to present content or instructions. (Use of Color)

Contrast Examples

You may think eyeballing your text and its background color is enough to ensure your contrast is sufficient. However, the lack of contrast between some colors may surprise you.

Here are some good and bad examples of contrast along with their contrast ratios.

Textual content should have the highest contrast ratio possible, so students can do their best in your course.

Don’t Use Color Alone

Never use color alone to present content or instructions. Add something extra, like a character or style, so students can tell there is something different about this particular content.

Example 1: Links/Hyperlinks

Links are a simple example of this concept. Links are typically blue and underlined. However, not everyone can see the color blue. This is why we add a secondary indicator that the content is a link: the underline.

Example 2: Pie Charts

Pie charts (and other graphs) are a great example to explore as well. Sometimes, you see pie charts split apart with many different colors. But the more colors used, the more they start to blend together.

For example, in this London Ethnicities pie chart, can you tell which blue segments are Bangladeshi, Indian, Pakastani, and Other?

Adding textures to your pie segments, like varying dots and lines, makes segments much easier to differentiate. It’s also extremely useful to add labels pointing to each segment, rather than having a key or legend containing each color and its corresponding label.

Black & White Copies and Printouts

Think about how often charts are printed (or copied) to black and white. This monochrome version must still allow your students to understand your chart. Some students may actually see all of your content in shades of gray if they have a certain type of colorblindness. (Though, this is admittedly rare.) Black and white printouts or copies, however, are much more prevalent due to the cost of colored ink.

The chart below (Figure 3) is the same chart seen in Figure 2, but with a black-and-white filter.

The chart in Figure 3 gives students no indication of what label goes with which segment. Adding texture and labels would make this chart readable again.

A Good (Black & White) Pie Chart Example

The chart below (Figure 4) illustrates exactly what needs to happen when a chart goes monochrome. Even though this chart rarely uses textures, and many segments look identical, we know what they are due to their labels.

Conclusion

Accessing content should never be a barrier between your students and their education. This is why we must ensure colors have sufficient contrast, and extra indicators are added to colors to convey something is different about certain types of content or information.