Building an Accessible Color Palette

When I joined the Egencia team, one thing I immediately noticed was the lack of contrast in our color palette. It was important to me to make our product accessible to those with visual impairments, so I started doing some research and testing our colors. I found that most of our product did not pass standard color contrast ratios, so I decided to take on improving them and pitched the idea to the team.

Where did Egencia's colors stand?

Monochromatic palette, relying heavily on grays and blues
Narrow set of 4 other pop colors
Contrast ratios were never considered
Most of the color palette fails contrast ratio testing

How can we improve?

Make all colors used for text pass at least AA
Round out the palette for more versatility

Making key improvements

I worked through color studies quite a bit – manipulating HEX values, swapping colors, and testing the changes within each product. I reviewed and collaborated with the design team to make sure we maintained quality visual design and no experience was compromised. After lots of iterations, a final palette was born.

Changes made

Overall, darker and more vibrant palette
Did not touch the core brand colors
Added an Orange for legible warning text
Added tints and shades for other colors for flexibility

Before, 4 of 10 colors pass at AA or higher.

After, 8 of 10 colors pass at AA or higher.

The final new color palette

Seeing the new colors in context

Use the slider to get a view of the Egencia product before and after our color changes. All text on the page now passes with at least an AA (4.5+) rating, and all critical decoration elements (icons) pass with at least AA Large (3.0+).

Going live with the color changes

Getting these new colors into the product was a group effort between design and development. One of my fellow designers and I worked to put together detailed documentation of how the new colors should be used. You see that documentation here.

The new colors went live in our product and were an important first step in Egencia's efforts toward greater accessibility.