How to design an accessible color scheme
This used to be the color scheme for Envoy’s web dashboard.
Like many web color schemes, it included a brand color (red), an information color (blue), a success color (green), a warning color (orange), and various shades of grey.
While these colors seem fine as standalone palette, over time we realized that they weren’t flexible enough for all the needs of our website UI. One comment kept coming up over and over in design critiques: “This text doesn’t have enough contrast.”
[Low contrast, left: the text color and the background color are similar, so the text is harder to read. If the colors contrasted more, aka were more different, the text would be easier to read.]
The shades in our existing color palette were largely too low in contrast, and the result was a lot of hard-to-read text across our site.
I set out to change our color scheme quite simply because we want our website to be readable. But I also wanted to design a color scheme that met web accessibility guidelines so that our site offered a more inclusive experience.
Designing for web accessibility means intentionally building an experience for all users, regardless of their visual, hearing, motor, or cognitive ability. Organizations like the World Wide Web Consortium (W3C) have created accessibility standards that anyone can follow to build a more inclusive web.
Here’s just a few reasons why we wanted to invest in building a more accessible color scheme, and why you might want to consider building one as well —
- A lot of people have vision impairment: the World Health Organization estimates that globally 1.3 billion people live with some form of vision impairment.
- Better readability helps everyone: a person’s vision ability is not the only factor to consider; think about the various types of computers and devices with different levels of resolution and brightness accessing your website. Easier to read means easier for everyone.
- Today’s guidelines could be tomorrow’s requirements: accessibility-related lawsuits are on the rise. Following existing guidelines could reduce company liability.
- Empathy for users: as a designer, you have the power to put good out into the world. Use your empathy superpowers to design for a wider variety of people because you care about them.
I set out on a journey to create a new color scheme with higher-contrast, more accessible colors. It took some time and thought to get it right, so I want to share my process with you so that more designers can tackle the challenge of designing accessible color schemes.
But first, what exactly are accessible colors?
The basic accessibility guideline for color is to choose colors people can see. Being able to see text is a big factor in being able to read it and therefore understand it’s meaning.
So how do you know which colors people can see? It’s all about contrast, which as I mentioned briefly earlier, is the comparison of foreground color to background color.
In the example below, you can see that the text on the left is very similar to the background color (low contrast), but the text on the right is different from the background color (high contrast) and is much easier to read.
The Web Content Accessibility Guidelines (WCAG) developed by the W3C provide a formula to calculate the amount of contrast between two colors, which results in a contrast ratio.
Contrast ratios range from 1:1 (there is no difference between the colors) to 21:1 (the highest difference possible). They are easy to calculate with many free tools—the Envoy team loves Tanaguru, Contrast, and the Stark Sketch plugin.
The WCAG also define exactly how much contrast should exist in order for text to be readable:
Level AA: the minimum standard
Small text should have a contrast ratio of 4.5:1 or higher
Large text should be 3:1 or higher
Level AAA: the enhanced standard
Small text should be 7:1 or higher
Large text should be 4.5:1 or higher
Note: your text qualifies as “large” if it’s not bold and 18pt (24px) or larger, or it’s bold and 14pt (~19px) or larger; otherwise it’s “small” text. The W3C defines a point as 1/72th of an inch and a pixel as 1/96th of an inch, so to convert pixels to points, multiply the pixel value by 0.75.
How I built a more accessible color scheme
Now that we’re all on the same page about what the standards are and why we want to follow them, let me tell you about how I made this happen.
Calculate the contrast ratios of all your existing colors
Use the handy tools I mentioned above (Tanaguru, Contrast, Stark) to test every color in your existing color scheme against the background of your website.
I found that none of our bright colors met the 4.5:1 standard for text, although we were using them for text all over our website. We were also using some of the lighter greys for text. So I knew I needed to adjust both our colors and our greys.
Choosing the greys
I inventoried the places we used grey text on the website, and found that we had the following use-cases:
- Main paragraph text, usually in the darkest shade of grey
- Secondary text or sub-headers, usually in the second-darkest shade of grey
- Disabled-state text and placeholders, usually in the third-darkest shade of grey
This 1/2/3 pattern is pretty common across the web, so it’s also a safe place to start if you’re building a palette from scratch.
So now I knew that I needed three shades of grey that look different enough from one another to suggest primary, secondary, or tertiary status, and that would also pass accessibility standards.
Using Sketch, I drew a few squares filled with my darkest color. I decreased the opacity of one of the squares by 50%, and used the color dropper to find the hex code for an approximate solid color. (You can use opacity alone to create different different colors on the web, but I’ve found solid colors are more flexible because they can reliably be applied to all kinds of design tools and projects.)
Then I calculated the contrast ratio of that lighter shade using the Stark plugin. I picked 50% randomly, but it turned out to be precisely 3:1 contrast against a white background. So I took that as my lower bound: this would be the lightest shade of grey we will use for text on our website. It passes Level AA standards for large text, and it will be acceptable to use for form field placeholders and other subtle text.
So now I needed to find a value between 100% and 50% of my darkest color for my secondary text. 75% felt good because of the even 25% steps, but after trying different shades I landed on 65% because it just met the 4.5:1 contrast breakpoint.
This process takes some time, but just keep calculating contrast until you find the precise color value that will meet the ratio you’re aiming for.
Once I had three shades of grey for text, I used the same process to define a few more shades for icons, borders and background colors (just not for text!)
Choosing the bright colors
I’ll be honest: the greys were a lot easier. Choosing one base “black” color and changing the opacity to find new values is fairly simple. But when it comes to choosing accent colors, you can pretty much pick anything, which leaves you with a lot of contrast ratios to calculate.
I used our existing colors as a starting point, because they had a purpose. Our brand color wasn’t going to change, and our other colors were from the color families commonly used for web states: blue for information, green for success, and orange for warning.
I started with a base color that I liked for each color family, then I adjusted the saturation and brightness values to create colors with the same hue but with different levels of contrast.
Again, this took tons of testing to discover colors I liked that also met contrast ratio breakpoints. The colorful palette was a lot more subjective; there were times I needed to slightly adjust the hue to make the different shades look “right” to me.
I ended up creating three shades of blue and green that could be used for text at different contrast ratio breakpoints.
Orange was tough, because orange becomes brown pretty quickly when you make it darker, so we decided to only meet the lowest contrast ratio bar with a lovely shade of mustard and use it sparingly.
I didn’t modify our base brand color, but I created two darker versions we can use for text.
I marked some vibrant lower-contrast shades to only be used as “accent” colors for icons or non-text decoration.
And finally, I created very pale shades of each color, to be used as background colors where necessary.
Wrapping it all up
We ended up with a full color scheme that now allows us to meet accessibility guidelines, and has plenty of options for all of our text and UI needs.
We carefully rolled out the new colors in our CSS and have been pleased with the results and increased readability so far.
There was a lot of trial and error throughout the process, but the results allow us to create a more visible, readable, and accessible website for all of our users.
What tips and tricks do you have from creating your website’s color palette? What accessibility related projects have you been working on? Share them with me below!
Thanks for reading! Be sure to visit envoy.design and subscribe to get notified when we publish something new. Or check out my previous how-to: How to ask good questions and level-up your user research skills
