Designing for Accessibility: Shortening the Learning Curve. (part two: color contrast)
By: Todd Chambers
Tags: Design, WCAG, Accessibility, Inclusive Design, UX

Make color and contrast a priority

Color and contrast are key elements of communication. Used well, they aid readability, strengthen recognition, and prompt quick recall. Simply put, color and contrast help us make sense of our surroundings.

As a digital product professional, it’s your job to understand how color and contrast affect your designs and to leverage that understanding for the benefit of your brand and your customer. And, I’m betting you’re pretty good at that.

What I’m suggesting is that you take your work a step further. That you begin earnestly considering how your designs are received by customers who may not see things (literally) in the same way as you.

In the US alone, nearly 32 million adults report having experienced some kind of vision loss. Many of these people suffer from low vision or colorblindness. For them, color and contrast take on a heightened level of importance.

To ensure that your content is more accessible, begin incorporating these four simple steps into your workflow today:

1. Ensure color contrast is at least 4.5:1

Make sure that anytime you place text over a background color, the combined contrast ratio is 4.5:1 or higher. This guarantees that most people will be able to distinguish the foreground from the background quickly and easily.

There are lots of tools that provide a quick confirmation of your designs color’s contrast. If you’re testing live pages, try Google’s Lighthouse browser extension. If you have access to the hex values or even a screengrab of the color combination in question, you can use conrastchecker.com. And, If your using Sketch to design your pages, the Cluse plugin is super-handy and will allow you to make decisions at the source (my personal preference).

And while there are no hard-and-fast rules for fail-safe color combinations, the W3C does specifically recommend avoiding red on black.

2. Use font sizes larger than 16 points

To ensure that your content is readable by as many people as possible use body copy that is 16 points or larger. And when possible, choose a typeface that has wide character strokes.

Doing these two simple things can make the world of difference for millions of people that struggle with nearsightedness and low-vision.

Additionally, remain mindful of how your font choice affects people with learning disabilities such as dyslexia. A recent study from the University of Michigan found that the Helvetica and Verdana typefaces read easier and aid cognition.

(3) Avoid placing text over photographic backgrounds

This principle seems too obvious to include. However, modern digital design trends continue to violate this best practice. Simply stated, the text is hard to read when it is placed over complex backgrounds. Add to the mix the dynamic nature of responsive and fluid design patterns and you have a recipe for illegibility.

Whenever possible, allow photographic content to stand on its own and place associated text either at the bottom or to the side.

(4) Never use color alone to communicate critical information

Elements that indicate success, errors, or alerts should always be accompanied by text to ensure optimal accessibility.

For example, if you wish to display a status update, don't rely on changing an icon color from red to green. Instead, include a text or numerical component so there’s no room for doubt.

Remember, due to colorblindness, where you see a red icon, someone else may see a brown or even a blue one.