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?
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.
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.
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 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.