Thinking Design
Published in

Thinking Design

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.

Cropped view of Runge Farbenkugel by Philipp Otto Runge [Public domain]

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.

A typical pattern for a color picker.

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.

Tints and shades of a color family

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.

Comparison of RGB colors of equal HSL luminosity values and their actual perceived luminance

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.

Simplified workflow illustrating UI color selection process

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:

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.




Stories and insights from the design community.

Recommended from Medium

Writing for the web and content design

Designers shouldn’t code. They should study business.

How To Get A Timeless Color Look, Circa 1998

Storyboards — how to separate good ideas from bad designs

Orange you accessible?

UX Research is Boring and Nobody Reads It

How to improve your typography skills

Designing for the worst cases

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

How I Became an Inclusive DesignOps Program Manager at Intel

Playful illustration of a content person on a giant swing.

Mobile App Accessibility

Inclusive Design in a Mobile-First World: An Interview with Robin Christopherson

Robin Christopherson giving a talk at the beyond tellerrand conference in Berlin in 2017

Drift: why your Design System isn’t working

Vibrant painting of two hands about to touch their index fingers; palm-side up on the left, and down on the right.