The Label: Creating an Accessible Color System
Product Designer, Madeline Rogier, shares the creative process of how to define accessible color palettes for Zalando’s design system.
In 1966, the art critic, Lawrence Alloway, introduced the term “Systemic Painting” for an art exhibition of the same name at the iconic Guggenheim Museum. This included works by abstract painters, such as Ellsworth Kelly, alongside minimalist, expressionist pieces by Agnes Martin. Although these works differed stylistically, they all used color systematically to create a unified whole, with artists applying colors in organized, purposeful, and deliberate ways.
I took inspiration from this concept of “systemic” painting when I was part of a team tasked with developing an accessible color system for Zalando as part of the Label redesign. This was an opportunity to create a consistent, purposeful, and joyful experience for customers. Our objectives were to design a scalable system for colors, define a color palette that meets accessibility standards, and create documentation for designers and developers.
Our Mission: Accessibility
Creating an accessible color palette was our mission at the earliest stage of the project. It was essential that we develop a product that is inclusive, provides access to people in multiple ways, and is readable. We aimed to remove barriers, and be compliant with the WCAG accessibility standard guidelines, by meeting at least level AA or above.
After various color explorations, it became clear to us that we needed to opt for a bolder and playful palette that would meet the accessibility standards. We tested color swatches against the WCAG guidelines, making slight adjustments to the color while preserving the warmth, luminosity, and vibrancy. In testing the colors to find the closest accessible shades, we discovered Kevin Gutowski’s color contrast picker tool which helped our decision making process.
To create a cohesive and harmonious palette, we choose the final colors based on each color’s brightness and saturation levels as well as the accessibility and readability. The final result is a palette of diverse tonality, capable of evoking a range of emotions while maintaining readability.
From Orange to Purple: Adventurous yet Accessible
Our focus on accessibility encouraged us to take a critical look at Zalando’s distinctive orange. Orange is a highly recognizable part of the visual identity, but in the digital space it fails to pass accessibility standards. In Zalando’s online store, most of the buttons and links were orange. The low color contrast could make it difficult for some people to read and recognize, so we needed to find a solution to make actionable elements accessible without compromising Zalando’s core brand expression.
After much experimentation and assessment, we landed on a vibrant shade of purple for actionable items for several reasons. Through benchmarking, purple was identified to be a bold opportunity area, as it is not widely used by our competitors. Purple is also a complementary color of the Zalando orange, sitting directly opposite orange on the color wheel. This makes it the perfect color to highlight key moments in the experience. This playful color combination offers high contrast and versatility, and most importantly, is accessible.
Scalability: How, When, and Where?
The next step was to scale and define the colors so that designers and developers felt enabled to use color efficiently and purposefully. The previous library consisted of over 55 color shades, lacked guidance on how and when to use the colors, and had no standard naming conventions. We had the opportunity to establish clear guidelines for consistency, as well as introduce a scalable nomenclature so designers and developers could be aligned.
As a starting base to define the palettes, we mapped out the color usage of the previous design system components and identified where and how color was being applied. This uncovered design patterns and helped to guide the baseline rules for the new color palettes.
Color Naming: Systematic and Memorable
To enable designers and developers, we created a common naming convention for referencing our colors. Colors are named by their generic name (e.g. red, white, blue), with a number attached. The core color is set at 500, and adjusted incrementally by 100 up or down to reflect luminosity (100 being the lightest, and 900 the darkest). This system offers the flexibility to add more colors to the scale in the future, and a quick name reference to each specific color.
O — Orange
N — Neutrals
P — Purple
R — Red
G — Green
B — Blue
To add an emotional and more memorable element, we also introduced naming conventions based on the markets Zalando sells in.
The Final Palettes
Primary
The primary palette is the most important, as it is applied to most of the UI, such as buttons, copy, divider lines, and backgrounds. Here we apply black and white for high contrast. This neutral palette doesn’t overwhelm the experience, allowing photography and product imagery full focus. Grays support black and white to create hierarchy and definition.
Secondary
The secondary palette includes accent colors that are applied less frequently, and are intended for functional and communication purposes.
The purple is applied to actionable and clickable elements, red for error states, alongside sales banners and flags, while green is for communicating success states and sustainability flags.
Specialty
The specialty color palette is used sparingly since they are bright and bold. These colors provide high contrast and are for illustrations and backgrounds only, adding splashes of joy and inspiration to the experience.
Conclusion: Never Stop Evolving
As Lawrence Alloway’s “Systemic Painting” exhibition so exquisitely showcased, the deliberate and purposeful application of color can create both visual cohesion and meaning. Color is one part of the key ingredients within a design system and for a brand. It can convey stories and form emotional connections with people, such as being playful and bold, or humble and trustworthy.
By creating an accessible color system, and a standard nomenclature in the initial design phases, our work has improved alignment and communication between designers and developers. Providing clear design documentation with accessible color usage also assists designers in the purposeful application of color, resulting in improved consistency in our design system. Perhaps most importantly, our work has improved the cohesiveness of the product experience of Zalando’s core audience — its customers!
Much like fashion itself, Zalando’s design system will continue to evolve. Our journey in creating an accessible color system is just one step in this evolution, but it demonstrates the benefits of mindful documentation and scalability. The release of The Label is still a process, and we will continue to adapt our design system, improving efficiency, and increasing accessibility for customers.
