Accessible Colors

Generate accessible color palettes using Adobe Leonardo's open-source contrast generator. Create WCAG-compliant color systems with automatic dark mode support, all integrated directly into Framer.

Open in Framer

Netoum

Creator

2 hours ago2h ago

Updated

Version

Free

Pricing

Users

Screenshot 1 for Accessible Colors, a Framer Marketplace plugin by Netoum.

Screenshot 2 for Accessible Colors, a Framer Marketplace plugin by Netoum.

About this Plugin

Contrast-First Color Generation for Framer

Transform how you create color palettes with the only Framer plugin powered by Adobe Leonardo contrast-based color generator

What Makes This Different

Traditional color tools force you to pick colors first, then check if they're accessible. Leonardo flips this approach: you define your desired contrast ratios, and it generates beautiful, scientifically accurate colors that are guaranteed to meet accessibility standards. It's not just a color picker—it's an intelligent system built on perceptual color science.

Key Features

Contrast-Ratio Driven: Set target ratios (2:1, 3:1, 4.5:1, etc.) and generate colors that automatically meet WCAG AA and AAA standards
Adaptive Color Scales: Create full lightness scales from your key colors, interpolated in perceptually uniform color spaces like LCH, LAB, or CIECAM02
Theme Generation: Build entire multi-color themes with shared backgrounds, ensuring every palette harmonizes perfectly
Advanced Color Science: Leverages HSLuv for accurate perceptual lightness and supports multiple interpolation methods for optimal results
Dynamic & Accessible: Colors that work for both light and dark modes, with built-in support for color vision deficiencies

Perfect For

Design systems requiring scalable, accessible color tokens
Products that need adaptive themes or user-controlled brightness/contrast
Teams prioritizing WCAG compliance from the start, not as an afterthought
Creating consistent color scales (grays, blues, semantic colors) with predictable contrast relationships

How It Works

Define your "key colors"—anchor points in your desired hue
Set your target contrast ratios for different use cases (body text, large text, UI elements)
Leonardo generates a complete scale of accessible colors, properly ordered by perceptual lightness
Apply directly to your Framer variables and components

Built on the same open-source technology that powers Adobe's design system, this plugin brings professional-grade, accessibility-first color generation to Framer, because great design should be inclusive design.For support info@netoum.com