As a designer who is an advocate for accessible design, I am encouraged by the increase in conversations about the value and importance of color’s impact on accessibility in design. If creating accessible digital products is new to you–like it was for me–the many perceived rules, restrictions, and regulations can make it all feel pretty intimidating. I’ve even heard these used as reasons to not focus on accessibility early in the development process.
Today, I’m a Product Designer at Coforma, a design and digital services agency that crafts creative solutions and builds technology products for government, commercial, and nonprofit partners. About two years ago, I decided to become more informed about accessibility and how to create designs that better serve all individuals. What I learned is that once you break down the accessibility guidelines into manageable concepts, you can create a framework from which to begin your design process.
In the sections that follow, I share my approach to making color accessible in designs.
Getting Started with Accessible Color
There is no wrong place to start when improving your accessible design skills. It’s more important to find a place to get started. Remember that breaking down the guidelines to accessible design sets your work up for success for all users and improves your designs. This type of framework causes you to think differently about all of the design choices you make.
I started with color because I love color—as do many designers. For those of you who describe sunsets in terms that include warm yellows, summer fruit tree oranges, and cotton candy pinks, this might be a good place for you to start, too.
1. Create an Accessible Color Palette
Whether you’re building a color palette from scratch or starting with a pre-existing palette, color contrast should be defined to optimize accessibility in design.
Understanding Color Contrast
The Web Accessibility Initiative of the World Wide Web Consortium has developed an international standard for website accessibility known as the Web Content Accessibility Guidelines, or WCAG. WCAG 2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations: A (lowest), AA (mid range), and AAA (highest). WCAG AA is considered strong accessibility. This is why most accessibility experts, including those at eSSENTIAL Accessibility, recommend working to achieve this conformance level.
Using a Contrast Grid for Color
It’s important to know which colors in your color palette work well together, which combinations do or don’t provide enough contrast for legibility, and if any color combinations vibrate against each other. Vibrating colors occur when two colors do technically have enough contrast for accessibility purposes, but tend to create strain on the eyes when paired together.
There are many tools available to check color contrast and to help you build a strong color palette to set up your design for success. Here are a few of my favorites:
Contrast Grid: This is the most comprehensive tool I’ve found. After entering your existing (or potential) color palette, you can quickly navigate which colors can be layered for legibility at the standard you’ve chosen. It tags each combination to indicate what level of contrast is achieved and tells you if the combination can only be used for headings or large type, as well as when the combination shouldn’t be used at all.
Accessible Color Palette Builder: If you’re looking for only an AAA level of contrast, this tool has a simple, straightforward user experience (UX) to quickly provide that information.
2. Build Out an Accessible Design Color Palette
Once you have determined the accessibility standard you want to meet and understand where your colors perform on a contrast grid, you can begin to evaluate your full color palette and determine if adjustments or additions are needed. In the Coforma brand examples below, you can see when using our primary brand color palette, our options are limited.
If you have the same results, you might need to consider expanding your color palette, adjusting some colors, or perhaps reconsidering if this color palette is right for your brand or product.
Expanding Your Color Palette
If you do decide to make adjustments, use what you discovered in your contrast grid to build out your accessible color palette. In Coforma’s palette, we noticed that with our true white background, all our colors passed for large text readability. However, once we started thinking about body text and other design elements, we realized we might need to add a darker blue into our palette. We also decided to include an additional gray that was much lighter in tone, so that we wouldn’t have to strictly rely on an all white background as often.
3. Incorporate Accessible Color into Your Design System
Once you have a better understanding of your palette and color combinations that are accessible, you can start to build out the colors in your design system. This understanding will inform the choices you make in pairing design patterns like buttons, calls to action, and links. With an accessible branded palette as a starting point, you may choose to add in a range of grays, like Coforma did, as well as your status or state colors.
Use Color Names That Build Understanding
When defining color in a design system, I find it’s best to name each color for its purpose rather than a visual description. Cross-functional team members then easily understand where each color will be used. For example, it’s much easier for a developer to see and understand the use cases for a color named [warning-main] or [error-light] versus [warm tuscan sun] or [fresh tomato]. This naming convention also serves as a reminder to be mindful of how different users might perceive the chosen colors.
Test for Different Experiences of Color
After naming your colors, consider how someone with low vision or colorblindness might experience your product. Since error states commonly appear in red tones and success messaging in green tones, what design choices might you make to help individuals with color blindness navigate and understand different alerts? The two tools linked below help you explore websites through a different perspective.
Go Beyond Color
It’s also important to think beyond color. Consider what your design looks like in grayscale. Can you still identify your buttons or calls to action? What about in a form field? Using additional cues such as icons and text descriptions can highlight errors and provide useful information. Using these additional elements allows color to serve as one of many identifiers and greatly improves all users' experiences.
What’s Next?
There are numerous opportunities to continue to improve the accessibility of your designs and design systems through the color choices you make. Once I felt more confident with my ability to make color choices to support an accessible design, I started thinking about where I could grow my understanding next. For me, the path led to information architecture and user workflows, and their implications for neurodivergent users or users with mobility challenges. Remember, there’s no wrong place to start. So, dive into color like I’ve outlined here or any other design area to start your journey today to become a more accessible designer!