Here’s What You Need to Know About Color Accessibility in Product Design

Because the web is for all of us

As a Product Designer at Handsome, I recently worked with a client to create the most complex implementation of an accessible color system that I’ve had a chance to work on, and thought I’d pass along some of my learnings.

Why Accessibility in Design is Important

Accessibility in digital product design is the practice of crafting experiences for all people, including those of us with visual, speech, auditory, physical, or cognitive disabilities. As designers, developers, and general tech people, we have the power to create a web we’re all proud of: an inclusive web made for and consumable by all people.

Also, not creating accessible products is just rude, so don’t be rude.

Color accessibility is important because it enables people with visual impairments or color vision deficiencies to interact with digital experiences in the same way as their non-visually-impaired counterparts. In 2017, The World Health Organization estimated that roughly 217 million people live with some form of moderate to severe vision impairment. That statistic alone is reason enough to design for accessibility.

Apart from accessibility being an ethical best practice, there are also potential legal implications for not complying with regulatory requirements around accessibility. In 2017, plaintiffs filed at least 814 federal lawsuits about allegedly inaccessible websites, including a number of class actions. Various organizations have sought to establish accessibility standards, most notably the United States Access Board (Section 508) and the World Wide Web Consortium (W3C). Here’s an overview of these standards:

• Section 508: 508 compliance refers to Section 508 of the Rehabilitation Act of 1973. You can read the in-depth ordinance here, but to summarize, Section 508 requires that your site needs to be accessible if you are a federal agency or create sites on behalf of a federal agency (like contractors).
• W3C: The World Wide Web Consortium (W3C) is an international, voluntary community that was established in 1994 and develops open standards for the web. The W3C outlines their guidelines for web accessibility within WCAG 2.1, which is essentially the gold standard for web accessibility best practices.

Ensuring Your Product is Color-Accessible

Accounting for accessibility early-on in a product’s lifecycle is best — it reduces the time and money you’ll spend to retroactively make your products accessible. Color accessibility requires a little up-front work when selecting your product’s color palette, but ensuring your colors are accessible will pay dividends down the road.

Here are some quick tips to ensure you’re creating color-accessible products.

Add Enough Contrast

In order to meet W3C’s minimum AA rating, your background to text contrast ratio should be at least 4.5:1. So, when designing things like buttons, cards, or navigation elements, be sure to check the contrast ratio of your color combinations.

There are lots of tools to help you test the accessibility of color combinations, but the ones I’ve found most helpful are Colorable and Colorsafe. I like Colorable because it has sliders that allow you to adjust Hue, Saturation, and Brightness in real time to see how it affects the accessibility rating of a particular color combination.

Don’t Rely Solely on Color

You can also ensure accessibility by making sure you don’t rely on color to relay crucial system information. So, for things like error states, success states, or system warnings, be sure to incorporate messaging or iconography that clearly calls out what’s going on.

Also, when displaying things like graphs or charts, giving users the option to add texture or patterns ensures that those who are colorblind can distinguish between them without having to worry about color affecting their perception of the data. Trello does a great job of this with their Colorblind Friendly Mode.

Focus State Contrast

Focus states help people to navigate your site with a keyboard by giving them a visual indicator around elements. They’re helpful for people with visual impairments, people with motor disabilities, and people who just like to navigate with a keyboard.

All browsers have a default focus state color, but if you plan on overriding that within your product, it’s crucial to ensure you’re providing enough color contrast. This ensures those with visual impairments or color deficiencies can navigate with focus states.

Document and Socialize Color System

Lastly, the most important aspect of creating an accessible color system is giving your team the ability to reference it when needed so everyone is clear about proper usage. This not only reduces confusion and churn but ensures that accessibility is top of mind for your team. In my experience, clearly calling out the accessibility rating of a specific color combination within a UI Kit or Design System is most effective. Also, socializing that across the team with a tool like InVision Craft or InVision DSM is extremely helpful. Here’s an example of how to document background to text color combinations and the accessibility rating of each combination.

Wrap Up

These are just a few tips to make your product more accessible, but keep in mind, these only relate to color accessibility. To understand accessibility guidelines in detail, I’d recommend familiarizing yourself with WCAG 2.1. While these guidelines can be a bit daunting, there are tons of resources out there to help you along the way, and when in doubt, don’t hesitate to reach out to designers in your area (or via the internet) for help.

(You can find me on Twitter @justinreyreyna).

I hope you found this helpful. If there are resources that you’ve used in the past that were not mentioned here, please share them in the comment section below. Conversations like this help us all create a more inclusive web.

Thanks for reading!

Resources

Here are some additional resources that have been helpful for me:

• Colorbox: Lyft’s new color palette selection tool, geared toward creating accessible, scalable color systems.
• Designing Systematic Colors by Jeeyoung Jung: This is a very in depth approach to creating an accessible color system. This is helpful if you’re designing for multiple products.
• Colorable: Easy to use tool to assess the accessibility of color combinations.
• Colorsafe: An accessible color palette generator.
• Color Oracle: A color blindness simulator for Windows, Mac, and Linux.