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 proactive, self-initiated 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 four 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.
I worked with another passionate designer on the team to proactively address the major color issues in our product. We wanted to explore HEX values in a way that did not wholly alter the personality of our product, but still brought the colors into an appropriate range of color contrast. We spent a few weeks on these details ensuring we got it right.
At the time our accessibility color work was happening, the brand team also introduced three new colors to the palette. In order to bring more harmony between the two experiences, we worked with the brand team to align the acceptable product usage of the new colors. Specifically, this meant assigning the purpose of the new purple, and declaring the aqua and pink colors as "Brand Only," due to the low contrast ratios.
The color changes would touch every part of the product ecosystem, so we needed to ensure that everyone was onboard with the changes and the timeline. I worked with all 20 product managers to get confirmation and commitment to launch the new code during a 2-day window. This required each team to be on the latest version of our UI Toolkit component library.
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.
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.
© Lauren Nielsen. Built with Webflow.
