palette-2

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
Screenshot-2019-05-06-16.08.50

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
Screenshot-2019-05-06-16.09.11

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

Screenshot-2019-05-06-16.09.18

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

new-colors-2-copy-1

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.

More projects

Multi-item shoppingProject type

ReceiptsProduct Design

© Sarah Gorman 2023