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.
*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.
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.
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.
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.
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:
- Part 1: Adaptive Color in Design Systems
- Part 2: Introducing Adaptive Color Palettes
- Part 3: Adaptive Color in Spectrum, Adobe’s Design System
Other articles you may be interested in:
