A11y Color Update


Color chips

Addressing A11y starting with color


Accessibility (a11y) awareness is gaining traction in the design and tech world but is still often an afterthought. This has definitely been the case at Egencia. As our design team matured and these issues started popping up more frequently, the effort turned into a joint project between myself and another designer to address our color palette.

Egencia's product suite is fairly monochromatic, relying heavily on grays and blues to communicate interactions. A narrow set of 4 other pop colors are used for signaling a variety of other things, but contrast ratios were never considered when the color palette was initially created. Unfortunately, 4 of the 10 most commonly used colors for text fail contrast testing outright, and 2 more colors are considered failing since our typeramp predominantly does not meet the definition of Large Text.


Working through color studies

Since Egencia is a brand within the Expedia Group, we have access to all of Brand Expedia's resources. There has already been quite an effort made on the leisure side of the house to address and improve accessibility. So when we set out to improve our components, we tapped into those resources.

As mentioned previously, Egencia's product suite is primarily grays and blues, so by creating more vibrant colors we could bring more energy and contrast to the site. The desaturated palette didn't help when it came to addressing a11y issues. Another designer and I collaborated closely to perfect each HEX value, working through color studies and constantly testing in-product.

No items found.

Testing new colors in context

We iterated through this phase quite a bit – manipulating HEX values, swapping colors, then testing the changes within the products. We wanted to ensure we still maintained quality visual design without compromising on our goals. The end result included adding an orange and darkening the gray palette.

New palette, spring 2019
No items found.
No items found.

Ensuring a11y compliance

The final color palette is the first step in moving us toward a more accessible product ecosystem. Along with this new palette, we also included detailed documentation lining out use cases, examples, guidelines, and exceptions. This is extremely important for the design team and the broader organization in order to evangelize the importance of a11y, as well as ensuring compliance.

No items found.
No items found.
No items found.
No items found.

Setting an accessibility baseline

As this was the design team's first major effort to address a11y from a cross-platform and cross-product perspective, we wanted to start with a manageable chunk of work. Updating our HEX values is not a huge investment of time so it's an easy, quick win to start moving us in the right direction.

This work has helped us set a baseline standard for a11y across Egencia's products. We've already inspired peers to learn more about accessibility and have also spurred a larger internal initiative to address these issues more broadly. This summer (summer 2019), training sessions have been scheduled specifically for engineering to learn about screen-reader and keyboard functionality and testing methods. We are really excited about this push toward a more inclusive product.

More ArchiveD Projects