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.
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
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
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+).
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 now live in our product, which is an important first step in our ongoing efforts toward greater accessibility.