Color and Web Accessibility: Two Major Things to Consider

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 everyone.[section_break]

General Accessibility Requirements

When you make something, the goal should be to make it as accessible as possible.For digital accessibility, there are different requirements outlined in the WCAG. From copy to animations to breadcrumbs, they cover everything you need to make something more 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.[section_break]

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 accessibility concepts 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. As you can see, 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? Without a descriptive text to support the color, it can be difficult to know what's wrong.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. Font size can also play a role (smaller font needs higher contrast). 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.[section_break]

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.

Additional resources on color

• 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