A car windshield has a tint—a tint that skews the colorful beauty of approaching landscapes. How can you see the beautiful nature without the tint? Remove the windshield.
You might be thinking: “Umm what? Think of the wind burn! The bird poop! The bug-to-face impacts!” And you’re right. The windshield is a functional part of the car. Without it, the experience might be prettier, but people couldn’t use the car (or wouldn’t want to).
The same thinking can be applied to digital experiences. When you design a website, you need to consider the look AND the functionality. Both matter. And, one major part of an experience’s functionality is accessibility—designing products, devices, services, or environments for people who experience disabilities.
When you make something, the goal should be to make it as accessible as possible.
There are different requirements for accessibility outlined in the WCAG. From copy to animations to breadcrumbs, they cover everything you need to make something accessible. Additionally, the WCAG provides three different conformance levels to help prioritize every rule: A (bare minimum), AA (mid-level), and AAA (best practices).
In this article, we’re talking color. Want a more in-depth overview about making accessible things? Read our introduction guide.
Color and Accessibility
Color is a powerful design element. It can communicate the intangible of the brand—the feel. Finding the right combination is important: if done right, color can enhance the experience, but, if done wrong, color can ruin it.
When incorporating color into your designs, there are two main things to consider: usability and contrast.
1. Don’t use color as the only way to communicate something
Here’s a picture of a stop sign before and after applying a color-blind effect. Color plays a role here. Red is bold and communicates “stop” to the users—but it’s not alone. There’s also the copy and the shape of the sign to support the message. If you take the color away, you still have a functional experience.
photo credit to UX Booth
Here’s a picture of a failed form notification before and after applying a color-blind effect. See the problem?
Design your experience like a stop sign. For example, if you have a form on your website, rather than simply outlining the box in red when a mistake occurs, you can add microcopy (“you must enter a valid email address”) and an “x” to communicate the problem to the user. Use color, copy, and symbols to communicate your message.
2. Don’t use poor contrasting colors
Reaching AA requirements in color contrast is the average practice for websites. Our advice? Aim for AAA and—if necessary—compromise for AA.
- AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
- AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Design your palette with contrast in mind. When you’re testing contrast, the colors that matter are the foreground and background. Get familiar with the requirements at the beginning of your process. That way, you won’t have to scrap everything when you input the palette into a contrast checker tool.
When designing something accessible, think about color.
Here’s two quick tips to consider:
- Use a combination of color, copy, and symbols to communicate with your user.
- Test the foreground and background colors with a contrast checker when choosing a color palette.
That’s it! Now go make all the colorful+accessible things.