Leonardo

  • UX Design
  • UI Design
  • Front-end Development
  • Project Management

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.

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?

input fields labelled "contrast ratios" with values 1.5, 1.74, and 2.03. Each displaying preview of output colors at the target ratio

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 d3 for color conversions and in-tool visualizations.

three line charts using d3 to show color interpolation in various color spaces

Writing on 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.

Articles

Additional tools

converter with input for color value, dropdown for conversion space, with output color conversion in string and object formatThe 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 color spaces. The tool accepts any of the formats and automatically identifies the color mode being input so that the user only needs to select the output they desire for translation.

Another tool is a color contrast checker. 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.

 

Leonardo in use

Leonardo has been a game-changer for products that allow for custom theming. One client uses Leonardo to pass brand colors for 3,000+ brands in order to create unique, on-brand, and fully accessible color palettes on the fly. Previously, this scale of color accessibility efforts would have been constrained to self-service documentation and auditing. Leonardo has automated this process for them with a guaranteed WCAG compliant output.

 

Additional links