
Adaptive Accessible Color Sys
Free
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Open source project under the Apache 2.0 License. All tools and the associated npm packages are free to use for commercial and personal projects.