Color and Contrast

The What

Any time you include color in your digital media, it’s important to think about which colors you’re using and whether you’re using color to convey meaning. Since not everyone sees color the same way, we can’t rely on color alone to effectively communicate a message. We also want to make sure we’re using colors that have enough contrast with their backgrounds that most sighted readers can perceive them.

The How

Level 1a: Use of Color

First, consider whether you need to use color to communicate your message. If possible, just don’t. Accessible use of color, check!

If you do need to use color to convey meaning, assume that people will perceive your color choices differently from the way you perceive them. Even setting blindness and colorblindness aside, research has shown that people perceive color differently from one another. And if we can’t rely on precise color differences to communicate effectively, that means we need to add other elements that communicate the same content, to ensure the message is getting across.

✔️ Some elements you can add to improve accessibility are:

• patterns
• labels
• symbols (emojis, icons)

In a pie chart, for example, you could make each wedge a unique color and a unique pattern. Even better, you could add labels to (or right next to) each wedge, naming its category and percentage. For important information, you could add the text “Important:” before the message. For required vs. optional assignments in a syllabus, you could use the text “Required” and “Optional,” or you could use one of two unique, intuitive emojis or icons next to each assignment, putting a key nearby.

❌ A few things that don’t actually improve accessibility (when combined with color):

• font size
• font style (bold, italics, underline)
• typeface (Times New Roman, etc.)

This is because screen readers won’t announce these changes, and some changes (like font face and style) can actually make it harder for some readers to parse the language.

Level 1b: Color Contrast

Alright, so you’ve started asking yourself “do I really need color here?” each time you want to use color to convey meaning. Great!

But if you are using color, how do you know which colors to choose?

First and foremost, we want to ensure that the colors we use have appropriate contrast so they can be perceived by most sighted users. When we talk about color contrast, we’re looking at a relationship between the color of text or an object and the color of its background. Sometimes, text or objects run across an area with multiple colors, in which case we’d check the “foreground” color (the text or object) against each of its background colors to ensure proper contrast.

If we’re working with a chart or other context where multiple meaning-making colors abut one another, we also want to pay attention to the contrast between these adjacent colors. The more colors border one another, the tricker it gets to create minimum color contrast among all neighboring colors. Have you ever seen a pie chart where the slices have a little space between them? That space makes each slice more perceivable, since slices only tough one color rather than three.

To fulfill WCAG 2.1 AA, you’ll need to have at least 4.5:1 color contrast for paragraph/small text and at least 3:1 color contrast for heading/large text and graphical objects (symbols, icons, etc.). This might sound kind of mysterious, but we don’t have to be wizards to do it. There are helpful tools like the WebAIM Contrast Checker that can pick colors off a webpage or digital document and calculate their contrast for you. The WebAIM Contrast Checker even tells you if the contrast passes WCAG 2.1 AA for small and large text and graphical objects.

So anytime you’re adding meaningful color to your digital materials, use a contrast checking tool to ensure the colors you’ve chosen for text and objects create a sufficient contrast with their backgrounds.