Introducing Adaptive Color Palettes
Part two of a three-part series exploring a new approach to creating accessible and perceptually adaptive color palettes in design systems.
This is why we have created what I refer to as “adaptive color palettes.” These palettes follow a systematic approach, in which designers define constraints that inform the generation of colors, rather than creating static swatches. Colors are defined with respect to their perceptual requirements and relationships, and swatches are generated based on minimal user input.
Accessibility First
First and foremost, we need to set a target contrast ratio. Target ratios allow us to generate color based on the desired contrast, programmatically conforming to WCAG accessibility requirements. This is not as simple as setting a static value like 3:1. Experienced designers know the importance of having different contrast ratios based on background color, hue, and other contextual triggers. This is complex, but because effort is placed on authoring the system and not output artifacts, you can continue to tweak and tune the system as a whole — all the while maintaining control over contrast ratios, which are a huge part of accessibility.
Color selection is based on the intended end use in order to eliminate much of the accessibility auditing during the selection process. Once the designer creates a set of constraints that will define the color family, the next task is simply to choose the desired ratios and move on.
Color Constraints and Variables
There are certain aspects of color we need to control in order for it to appear as we intend. The best color space in which to express this concept is the Lightness-Hue-Chroma (LCH) space, since the leading attributes of color we think about as designers are hue and chroma (saturation). This is not to be confused with Hue-Saturation-Lightness (HSL), which is less representative of human perception. For more information on perceptually based color models, see the CIELAB color space and the CIECAM02 color model.
I haven’t forgotten about lightness, which we want to be our primary variable in color generation. Since accessible contrasts are based on the “relative luminance” of colors, lightness will need to be the primary variable in how we generate colors. To allow for this, we need to define color as a variable along the L axis. Working in LCH allows you to fully specify colors in a perceptually robust way, and to compare and adjust lightness — and effectively, the contrast ratios — directly.
Now, as designers, we may want to specify hue and chroma shifts in a color for a given lightness. This allows manipulation of the intensity and/or temperature for lighter or darker variation of a color separately, providing more creative freedom and aesthetic choices. For example, as you lighten a blue color, you may wish to make the blue warmer so that the color lightens in a more pleasant way. Warming a blue as it becomes lighter reflects the observation of blue objects in our natural world, such as how the blue of the sky becomes warmer as it approaches the light source (the sun). Conversely, blue colors in nature become cooler as they darken, like the sky when night approaches. This practice is common in representative art, when trying to capture the interplay between light and objects in a more expressive way. Carrying this practice into color selection for user interfaces is a way designers are able to affect the perceived environment of their experiences.
Defining color constraints based on lightness enables us to generate swatches of any lightness (or “relative luminance”) and ensure that the color reflects our aesthetic choice while conforming to a target contrast ratio.
Variability of Background
Color perception is affected by adjacent and surrounding color. For interface design, this primarily relates to the background color, or the overall “theme.”
One example of this phenomenon is related to the perception of contrast between lighter and darker UI. While a color with a 3:1 contrast ratio may appear just fine in a light theme, the same color at 3:1 contrast ratio with a dark background does not appear to have sufficient contrast. In order to compensate for the perception of contrast, we may actually need the color to be a higher contrast ratio in order to appear uniform across both themes.
Similarly, a color’s saturation may need to be adjusted based on the brightness of the surrounding background. Looking at this example of fuchsia, we may feel like the saturation is appropriate; however, the same color on a dark background appears to be more saturated.
For these reasons, we need background color influence in how we generate color, as well. In some cases, this may mean that the brightness (lightness) of the background directly relates to the contrast ratio needed for a generated color (changes per theme); in other cases, it may mean the background color directly relates to target saturation or hue shifts for the color.
Adaptability of Color
The final aspect of this new concept is that of adaptability. Since colors are defined as a set of constraints along the axis of lightness, which are also based upon the lightness of the background color, and the desired output of color is defined by a target contrast ratio with the background, what we end up with is a color palette that adapts based on broader environmental considerations.
This way of defining color makes it much easier to modify the specific colors in your design system by adjusting any number of variables. If a color is too dark, you can simply adjust the desired contrast ratio and the color will adjust within your preset constraints for hue and saturation. You can also adjust the saturation of colors more uniformly: In the past, adjusting a single color swatch’s saturation meant reevaluating all swatches comparatively in order to ensure the saturations of each color in the color family (as well as each color in your entire palette) appeared cohesive. Now, you can adjust the saturation with a clear curvature to its rate of change across the color family, and do so in a way that gives confidence in the choice/change relative to the entire system.
The ability to modify backgrounds as a universal color palette adjustment is another powerful adaptive aspect. Since the colors are based on contrast ratio, any adjustment to your background color will regenerate the rest of your palette accordingly. In practice, this could mean darkening or lightening existing color themes, or introducing entirely new themes. If the engine for this color generation is a service for your product, this can become a mechanism for end users to personalize their experiences of your product without violating design intent. This personalization ensures maximum legibility for end users, whether they are in direct sunlight, in a dark studio, or experiencing screen glare. As a designer, you can then rest assured that no matter how end users modify the presentation of color in the UI, it will conform to the constraints you have defined.
In my next article I will discuss how we’ve implemented an adaptive color palette in Adobe’s design system.
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:
