Adaptive Color in Spectrum, Adobe’s Design System

Nate Baldwin
May 30, 2019 · 4 min read

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

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
Generating all colors by contrast based on variable background
Image for post
Image for post
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.

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

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!

Thinking Design

Stories and insights from the design community.

Nate Baldwin

Written by

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

Thinking Design

Stories and insights from the design community.

Nate Baldwin

Written by

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

Thinking Design

Stories and insights from the design community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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