Thinking Design
Published in

Thinking Design

Adaptive Color in Spectrum, Adobe’s Design System

Part three of a three-part series exploring a new approach to creating accessible and perceptually adaptive color palettes in design systems.

Adobe Spectrum color palette

*Updated based on the release of Leonardo, an open source tool for creating adaptive color palettes*

The entire concept of adaptive color palettes was derived from our experience solving for color in Adobe’s design system, Spectrum. At the time of this work, we supported six different color themes, all of which needed to appear aesthetically related, with similar perceptive contrast with the background colors, and to follow uniform guidelines for accessibility.

We started by generating our gray system based on target contrast ratios. It worked well, but when we tried to do the same for our colors, it got more complicated.

Grays generated by target contrast ratio

For color, we wanted to rely on the same methodology of determining which swatches can be used for large and small text (based on WCAG contrast guidelines). When simply generating swatches of the same contrast across each theme, we realized the problem was more complex. As I mention in my previous article, color perception is affected by adjacent and surrounding color, making color appear lower contrast in darker backgrounds even with consistent contrast. In order for color contrast to appear consistent across themes, the actual contrast ratios had to change depending on the brightness of the theme background.

Contrast ratio adjusted to approximate consistent optical contrast

We also recognized that some colors’ brightness is critical to its identifiability. For example, a dark yellow is no longer yellow. Because of this we concluded that certain colors cannot be used for text or graphical elements as they will not be able to meet the criteria of color contrast and retain its identifiable nature.

Yellow does not look yellow when it meets contrast requirements

In the end, we created a tool called Leonardo that generates all of our colors given these constraints and exceptions.

Leonardo

Leonardo began as a color-generation algorithm based on predefined constraints and variable target contrast ratios. The target ratios are determined by both the hue of the input color and the brightness of the input background color, allowing us to identify the proper contrast ratio for any color within our design system’s color palette and within any context of background color brightness. The dependency on the background color enables us to increase or decrease contrast ratios as needed.

Generating all colors by contrast based on variable background
360 degrees of color hue generated on white background

The tool allows us to pass any number of hue degrees for each UI color and one value for a background color, for each of our themes. When we include our categorical color palette, this comes to 13 unique values for us to maintain. We have 4 tints of each color and 11 shades of each background color, giving us an output of 59 swatches for any given theme. In terms of purely grayscale background colors, we’re able to generate 255 different themes (based upon brightness values), or 15,045 color swatches. We can, however, pass through colorized backgrounds and generate swatches that still conform to our defined contrast ratios. A conservative estimation of this capacity would be at least 2,676,240 possible color swatches (59 swatches for background themes across 360 degrees of hue for each of 126 brightnesses of the possible backgrounds, assuming half of the backgrounds won’t yield desirable contrast).

Leonardo can also generate any color on the spectrum for any given theme, giving our team tremendous flexibility in future adaptations or modifications to our color palette and themes.

Open sourcing Leonardo

Since this article was originally written, we have begun rebuilding Leonardo using d3 as an open source tool. Our goal is to make the selection and generation of accessible contrasting colors easier for all designers and engineers in the industry.

Read about Leonardo
Visit Leonardo at leonardocolor.io
Contribute to Leonardo on GitHub

Final Thoughts

The designers and engineers working on Adobe’s design system are determined to make design-system authoring easier. Colors are just one of many challenges we need to solve for in this space.

What challenges do you and your team face when creating design systems? The design systems community continually influences and inspires our work, and we’d love to hear from you!

Continue in the series:

--

--

--

Stories and insights from the design community.

Recommended from Medium

3D Fashion Design Reshapes the Clothing Supply Chain

Good & Bad Design

Spotify Discover Case Study: Establishing Trust

Digital Transformation Step #02 — Understanding Department / Teams’ Individuality

Total (Holistic) Experience

The Aliens Are Coming

Case study: New York Public Library’s “Three Faiths” Online Exhibition

Honey’s getting even sweeter. Introducing design updates to your Honey navigation.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nate Baldwin

Nate Baldwin

Designer on Spectrum, @Adobe’s design system. Intensity curious about color, visual perception, and the systemization of design.

More from Medium

Systemising SEEK’s Brand Palette

Two colour wheel spectrums on a white and dark background.

Atomic Design in action — designing systems composed of components. How to.

Design system FAQ: adoption and implementation

The NYCTA Graphics Standards Manual contains scans of Massimo Vignelli and Bob Noorda’s (Unimark) modernist masterpiece.

How we created the Design System for Naukri.com, India’s largest job portal