A11y Standardization

A11y Standardization

A11y Standardization

A11y Standardization

A11y Standardization

Egencia

Egencia

Egencia

Egencia

Egencia

A11y hero image

Addressing Accessibility starting with color

Addressing Accessibility with type & color

Addressing Accessibility with
type & color

Addressing Accessibility starting with color

Company // Product
Egencia // UITK


Date
Sept 2018-Mar 2019

Role
Co-designer

Responsibilities
Visual design
Documentation


Platform
Responsive web
Native

Team
2 designers

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.

60% of the most common text colors fail contrast testing

Design

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. 

Expanding the color palette

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. The end result included adding an orange and darkening the gray palette.

Text colors before

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

Text colors after

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

Test

Injecting new colors into our products

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.

Injecting new colors into our products

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.  

new color palette

New palette, spring 2019

Search form with old colors

Search form with the previous colors

Search form with new colors

Search form with the new colors, showing very subtle but important differences

Trip Details page with old colors

Trip details page with previous colors. None of the calls to action links having acceptable contrast ratios.

Trip details page with new colors

Trip details page with new colors. 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+).

Solution

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.

Ensuring a11y compliance

The final color palette and type ramp are the first steps for us in moving toward a more accessible product ecosystem. With these new pieces in our design system, we 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.

Screenshot 2019-05-06 16.09.30
Decorative elements

Adding definitions was crutial to the success of this project. Namely, around Critical and Non-critical decorative elements.

Usage guide

This is the first detailed guide for color usage Egencia has had. This will help create a consistent color story across the product.

Results

Setting a 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.

Setting a 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.

Sarah Gorman

Sarah Gorman and I partnered closely to produce the new color palette, write the documentation, communicate the changes and get it implemented.

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

© 2019 Lauren Nielsen. Built with Semplice.