What is Leonardo

Leonardo is an open-source color management system designed for building accessible, adaptive UI and data visualization palettes. Unlike static color pickers, Leonardo uses contrast-ratio-based generation to ensure every swatch in a scale meets specific WCAG accessibility requirements. It leverages advanced color spaces for perceptually uniform results, allowing designers to define target lightness and contrast ratios rather than manual hex values. By integrating with the @adobe/leonardo-contrast-colors engine, it enables developers to export design tokens that support real-time, end-user theme personalization, including dynamic dark mode and high-contrast adjustments.

Leonardo 's Core features

Contrast-Ratio-Based Generation

Instead of manually selecting hex codes, users define target contrast ratios against a background. Leonardo automatically calculates the necessary color values to hit those specific WCAG targets. This eliminates the guesswork in accessibility compliance, ensuring that text and UI elements remain readable across all generated shades, regardless of the base color hue or brightness.

Perceptually Uniform Scales

Leonardo utilizes advanced color spaces to ensure that color scales are perceptually uniform. This means the perceived difference between steps in a scale is consistent to the human eye, preventing the 'banding' effect often found in linear RGB gradients. This is critical for data visualization, where color steps must represent data values accurately without visual bias.

Adaptive Theme Engine

The tool enables the creation of adaptive themes that can be adjusted in real-time. By using the associated npm module, developers can allow end-users to modify the contrast, brightness, and saturation of the entire UI. This provides a high level of inclusivity, allowing users with visual impairments to customize the interface to their specific needs without requiring a separate 'high-contrast' stylesheet.

Colorblindness Simulation

Leonardo includes built-in tools to evaluate palettes against various color vision deficiencies, including Protanopia, Deuteranopia, and Tritanopia. It calculates the measurable color difference between swatches, allowing designers to automatically cycle through colors to find combinations that remain distinct for all users, ensuring that data visualizations are universally interpretable.

Design Token Export

Leonardo bridges the gap between design and development by exporting themes as standard design tokens. These follow W3C working group specifications, making them compatible with modern design systems. Developers can directly import these tokens into their CSS or build pipelines, ensuring that the design intent is perfectly preserved in the final production code.

How to use Leonardo

Navigate to leonardocolor.io and select 'Create new theme' to initialize your color palette workspace.,Define your base colors and set target contrast ratios (e.g., 3:1, 4.5:1) for each swatch in the scale.,Adjust the lightness and saturation parameters using the perceptual color space controls to ensure visual balance.,Preview your theme in different color vision deficiency modes to verify accessibility compliance.,Export your work as CSS custom properties, SVG assets, or JSON design tokens for integration into your codebase.,Install the @adobe/leonardo-contrast-colors npm package to implement the theme dynamically within your application.

Use cases of Leonardo

Enterprise Design Systems

Design system leads use Leonardo to define a single source of truth for color. By generating scales based on contrast ratios, they ensure that every component in their library—from buttons to data charts—is accessible by default, reducing the need for manual accessibility audits.

Accessible Data Visualization

Data scientists and front-end engineers use Leonardo to create sequential and diverging color scales. By ensuring perceptual uniformity and colorblind safety, they create charts that accurately represent data trends without misleading users with visual impairments.

User-Centric Personalization

Product teams integrate the Leonardo npm module to offer 'Accessibility Settings' in their apps. Users can adjust the global UI contrast or brightness, and the application dynamically re-renders the color palette to maintain accessibility standards while meeting user preferences.

Who benefits from Leonardo

UI/UX Designers

Designers need to create scalable, accessible color systems that go beyond static palettes. Leonardo allows them to maintain design integrity while ensuring strict adherence to WCAG accessibility standards.

Front-end Engineers

Engineers require programmatic ways to implement color systems. Leonardo provides the npm packages and design token formats necessary to automate theme generation and ensure consistency across complex web applications.

Accessibility Specialists

Specialists use Leonardo to audit and refine color palettes. The tool provides the quantitative data needed to prove that a color system is inclusive and usable for people with various color vision deficiencies.

Leonardo