Color with a purpose

Leonardo

Accessible, adaptive color systems generated from intent, rather than one swatch at a time.

My contribution: Creator & contributing designer/developer
Context: Open-source tool
Explore the tool: Visit the project

Overview

Leonardo is an open source tool for creating adaptive color palettes; a custom color generator for creating colors based on target contrast ratio. Leonardo is delivered as a Javascript module (@adobe/leonardo-contrast-colors) with a web interface to aid in creating your color palette configurations, which can easily be shared with both designers and engineers. Simply put, Leonardo is for dynamic accessibility of your products.

My role

Designed and build the web application and underlying npm module. Primary maintainer of the Leonardo open source project.

Context

Creation of color palettes for digital products is a tricky process, especially when taking into consideration the multitude of sighted users who will interact it. The Web Content Accessibility Guidelines (WCAG) has created a set of basic criteria for digital products to be considered accessible; the most pertinent of these criterias are those of color contrast minimums.

The way designers have historically created accessible color palettes has been a process of selecting a color, checking it’s contrast with a background, and then re-adjusting the color. This repeated process is time consuming and makes the process of creating a holistically cohesive color palette more complex.

For Adobe’s design system, Spectrum, we wanted to turn the problem on its head. Rather than audit colors to meet contrast requirements, why not define a continuous color scale and generate individual colors by desired contrast ratios?

Screenshot of contrast ratio swatches in Leonardo

Synchronized inputs for target contrast ratio and lightness with real-time accessibility feedback.

Adaptive theming

Leonardo has since grown into a more robust tool for creating and evaluating color themes. Themes can be easily modified for universally increasing contrast, decreasing saturation, or changing the brightness of the theme altogether. This makes dark mode support easier to achieve than ever before.

Walk-through demonstration of creating an adaptive color theme in Leonardo.

Visualizations in Leonardo help designers who want to evaluate perceptual balance of color. Leonardo provides visualizations for all supported color spaces as a way to encourage exploration and learning. Some color spaces are better than others for certian things, but there is no one color space that outweighs them all. Leonardo aims to provide designers insight into this fact with visualizations and examples as they edit their colors.

Color wheel and 2d charts of color theme

Charts to evaluate color harmonies, hue, and saturation relationships acoss an entire theme.

Leonardo also provides resources for engineers. Themes output the parameters needed for the @adobe/leonardo-contrast-colors package. Alternatively, engineers can copy CSS properties or Design Tokens directly from the web app.

Auto-generated design tokens with descriptions about a color's contrast and accessible usage.

Data visualization color scales

Leonardo has a dedicated workspace for creating sequential, diverging, and qualitative (categorical) color scales for data visualization. The sequential and diverging scales have a table reporting on the contrast accessibility of the colors.

Walk-through demonstration of creating a colorblind safe palette from an existing set of colors.

For qualitative scales, Leonardo generates accessible combinations of colors. This feature provides constraints for you to define the threshold of color difference and colorblindness types that you want to support. As you identify colors you want to include in your palette, they are added and "locked" to the palette. This enables you to cycle through possible combinations of colorblind safe colors to pick the best colors for your needs.

Qualitative color scale editor in Leonardo

Leonardo's one-of-a-kind generation of accessible color combinations based on accessibility constraints.

Additional tools

The web interface also includes a few small-yet-handy tools for designers. The first is a conversion tool so that users can easily convert color values between Hex, RGB, LAB, LCH, HSL, HSV, HSLuv, CIECAM02, CIECAM02-UCS, XYZ, OKLAB, and OKLCH, color spaces. It also finds the closest matching Pantone color.

Bulk conversion dialog with checkboxes for each color space

Bulk conversion enables designers to continue color analysis in other tools like Excel.

Leonardo also provides a color comparison tool. Leveraging the same w3c relative luminance formula (used for WCAG criteria and for generating colors in Leonardo), the tool exposes a simple foreground/background contrast checker. Unlike many other tools, Leonardo’s contrast checker includes an alpha channel so that you can identify what levels of opacity a particular color must be in order to meet contrast requirements.

Along with contrast, the comparison tool provides daltonized simulations for colorblindness types, as well as the calculated color difference for each type. This helps to verify how similar or different a color will appear to various color vision deficiencies.

Leonardo comparison tool with green and blue colors with 3.44 contrast ratio

A robust color comparison view provides WCAG compliance reporting and color difference for colorblindness.

Open source npm module

Accessibility is not just an Adobe problem, so we wanted to ensure Leonardo was made available to anyone who needs it, for free. The decision to build open-source helped steer us towards using existing open-source libraries such as chroma.js for color conversions and d3 for in-tool visualizations.

Leonardo in use

Leonardo allows products with custom themes to generate colors from brand inputs and target contrast ratios. Rather than manually auditing and adjusting every swatch, teams can build contrast requirements into color generation. The accessibility of the complete interface still depends on how those colors are used.

Writing the tool

Several articles have been written in order to better introduce Leonardo, colorimetry, and the concept of adaptive color palettes, which were all inspired by our work creating Leonardo. These articles help to further illustrate the depth of our journey into color science and creating a feature-rich tool for designers and engineers to author adaptive color palettes for their digital products.