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.

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.

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.

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.