Adaptive Color in Design Systems
Part one of a three-part series exploring a new approach to creating accessible and perceptually adaptive color palettes in design systems.
So, you’re creating a design system for your company. Your team is furiously working to conceive, build, and audit a system of components and design principles.
As you think about your product’s interface, choosing a color palette is one of the first things you’ll do. If you’re following best practices, you are likely conforming to Web Content Accessibility Guidelines (WCAG). These guidelines define minimum contrast ratios to ensure legibility of content in web interfaces. If you’re not already following WCAG standards, you may find that certain content or UI elements are difficult for some of your users to see. Regardless, the issue of color contrast is an inevitable part of choosing a color palette in a design system.
But creating a harmonious color palette that conforms to contrast standards is complicated. You may start by choosing a color palette, then apply the colors to UI elements for context and readjust the colors until they are the best selection for your product. An adjustment to any one of a color’s properties will result in a different contrast ratio, so as you refine your color selections, you need to continually recheck the contrast.
Often, in the future, you will have to modify or add to your color palette to meet new requirements — this could be anything from allowing alternate background colors for components to creating a new theme entirely (such as to utilize Apple or Android Dark Modes). These scenarios may require you to make adjustments to color that meet your product aesthetic while conforming to standard contrast ratios.
Throughout this process, you may find that adjustments to one color diminish its harmony with the other colors in the palette. This requires that you either readjust the color again or alter your entire palette to conform to the outcome of your restraints.
This back-and-forth audit and refine process is tedious — all to simply choose a color palette that can meet accessibility requirements. It’s enough of a complex issue that new products and tools keep popping up, offering new ways to help address the problem. Each of these tools improves our experience and moves us closer to the solution, but they all fall short of solving the overarching issue.
Allow me to share some ideas about adaptable color systems that we have implemented in Spectrum, our Design System at Adobe, including how these concepts relate to the broader base of users working with color in user interfaces.
Glossary of Terms:
When approaching a color system, it helps to have a solid set of terms (and definitions) used by your team, for the sake of clarity:
- Color: A single output comprised of all values for each color channel.
- Color Family: A spectrum of tints, shades, and tones for any given color.
- Color Palette: A group of color families.
- Theme: A color palette with the context of an environment.
Note: These definitions are intended to serve as a key within this article; they are not indicative of broader academic or industry naming standards for such objects or concepts.
The Current State of Color Selection
You’re probably familiar with existing color-selection tools. Many of them are simple HSB color pickers, with little to no aid regarding color relationships. Most of these tools don’t account for the perceptual nuances in color that need to be observed in a design system, nor do they provide any reference to evaluate the impact of color in various contexts. These nuances affect overall color choices, as well as decisions regarding tints and shades.
Some tools also lack the notion of relational aides, such as guides to colors of similar saturation or lightness that might facilitate selection of a consistent or familial color palette. At the end of the day, the existing color-selection tools are really geared toward picking color palettes to use in static media, or as initial reference points for an overall aesthetic theme, not for creating a full or adaptive color system.
New tools are evolving
The good news is that color tools are getting better. Recent explorations in this space have yielded tools that make it easier to create a family of colors instead of just pick individuals. The benefit is that designers can create smooth transitions between the tints and shades of a color family, typically with adjustments to hue, saturation, and lightness. The tools also provide easy export options for engineering — something critical for UI design, ensuring that color choices are more directly integrated into the end products. Some of these new tools have nice features like interpolating values between color steps, using lines or cubic Bezier curves.
Nothing Solves the Entire Problem
But these tools have pitfalls, as well. First of all, they’re working in the wrong color space. Many of these tools focus on the HSL model, which is a cylindrical representation of the RGB color space. Since it’s in RGB, color properties do not accurately reflect the way color is perceived, which results in unusual transitions in color (even in tools that expose options for smooth curves). While output needs to be restricted to the available gamut in the RGB space, color selection should never begin there.
Smooth curves between properties in a color family is only useful if they are in the right color space.
Also, typically these tools only allow you to build out or modify a single color (or family) at a time, so you have no awareness of the other colors in your palette. Auditing your color selection to ensure the palette remains harmonious is a back-and-forth process. One such nuance is ensuring that the lighter tints of your color family accelerate or decelerate their saturation levels in a way that appears consistent across each color in your palette. Many times, you’ll find that one selection gets more or less saturated than another after the individual color’s modifications have been made. Tools can get us a set of good colors, but making them an excellent set of colors is difficult to do.
These tools also offer no way to evaluate context for color selection, such as how colors appear in text or in relationship with the background colors used in your products. With contextual color relationships, your color choices may be very different. A color that might look nice on a white background can often seem oversaturated on a dark background. This sort of chromatic adaptation is behind many optical illusions (as with the infamous dress) and has an effect on color selection, as it alters our perception of the color we’re observing.
These tools fail at one feat many of them boast: choosing accessible colors. They still require designers to address accessibility in a post-color-selection auditing process, and nothing addresses the issue of colorblind-accessible color palettes. Sometimes a contrast auditing feature is part of the tool itself, but typically additional accessibility tools have to be used. And none of them truly addresses the intended application of a color — e.g., if it’s to be used for large or small text — as a determining factor in color selection.
Recap of common shortfalls:
- Suboptimal color space
- No contextual color assessment
- Inability to holistically assess palette and value steps
- Inability to adapt color depending on those surrounding
- No accessibility-first approach
- Fragmentation, necessitating manual processes
In short, we’re still working with a fragmented and incomplete tool set. For further reading on tools and processes for color selection in design systems, here are a few places to start:
- Leonardo: an open source contrast-based color generator
- The Ultimate UX Guide to Color Design
- Designing Systematic Colors
- Reproaching Color
- Palette App
- Color Review
Thankfully, design tools continue to evolve — the industry has realized UI and UX design is a systematic process based on variables, conditions, and logic. This is the environment we design for, so why doesn’t our color selection apply the same concepts?
We work in a world where relationships and context are part of everyday design decisions. What we need as design-systems designers is a variable, contextual approach to color selection that begins with accessibility.
In the next article, I will explore adaptive color palettes as a new systematic approach for designers to solve the problems and pitfalls of our existing toolset.
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:
