With rising regulations around accessibility requirements in software offerings around the world, Zebra’s Design System needed to offer a solution that was still flexible enough for customer white-labeling while remaining compliant.Â
Being a global company, our products exist in several parts of the world. The European Accessibility Act (EAA) requires software, including mobile applications, to comply with at least the AA level of accessibility standards, ensuring that they are accessible to people with disabilities by incorporating design principles that facilitate usability and inclusivity.
While we could have done an audit of all of our existing components to define what was and wasn’t compliant, the fastest thing we could do for yesterday’s deliverable was to reevaluate our color system to ensure adequate color contrast that would directly influence all components.
Our original color system consisted of 20+ grays which made it confusing for teams to understand how to use them. Our component library was still being built which left a lot of room for interpretation across the board.
By understanding the various use-cases for grey, we were able to reduce our swatches from 20 to 10 and identified default and subtle swatches that would be used for text, icons, and borders while maintaining AA compliance.
As for our colors, the first exercise I conducted was just capturing the contrast ratio performance of our palette. It was all over the place.
By mapping our primary colors in this manner, it was clear that we needed to realign our color swatches not only with each other to create a balanced palette, but also to target contrast ratios.
Following a detailed color analysis, I started iterating on proposals for our color system.
Upon further refinement, IÂ proposed our new color system:
For example, if CVS purchases our solution and requests that the solution be recolored to their brand’s red, we run into issues as their brand color is not AA-compliant.
By basing our color system off of target contrast ratios, we are now able to accommodate customization requests from customers through a systematic approach. By using a generator, we create a series that passes through the brand's token to create a color-series that can be applied to our components.
IÂ parntered with our development teams to create a self-service tool for implementation teams to plug in their desired color and preview the adaptation in our tool.
Additionally and finally, our design system now has a well-documented color system that has increased awareness of accessibility standards across teams.