A car windshield has a tint—a tint that skews the colorful beauty of approaching landscapes. A quick fix? Remove the windshield.
Bad idea, right? Think of the wind burn, the bird poop, the bug-to-face impacts. 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). When you design experiences, you need to consider the look AND the functionality. Both matter.
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).
Want a more in-depth overview about making accessible things? Read our introduction guide.
In this article, we’re talking color.
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:
- 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.
ADDITIONAL COLOR RESOURCES
Contrast Checker | Web Aim
Color Contrast Analyzer | Google Chrome
Color-blind Simulator and Contrast Checker | Sketch
Accessible Color Palette Generator | Color Safe
WCAG Contrast Checker | Acart Communications
Read Clique’s Accessibility Guide: Accessibility: A Brief 6,000 Word Introduction