Accessible Palette Studio
Eleven-stop OKLCH scales, state-aware WCAG 2.2 + APCA grading, color-blindness simulation, and one-click exports for Tailwind, Figma, CSS, iOS, and Android.
Need a quick palette instead? Use the simple Color Palette Generator → · Set the matching type system in the Accessible Typography Studio →
Palette design workspace
Royal Blue
Auto-derived (+210° hue)
Auto-derived (+120° hue)
Hue bias for grays
11-stop OKLCH scales
11-stop OKLCH scales
Perceptually-uniform shade systems — 50 through 950 — across primary, secondary, accent, neutral, success, warning, danger, and info. Light/dark mirror automatically.
WCAG 2.2 + APCA, side-by-side
Every pairing includes the normative WCAG 2.2 luminance ratio and an experimental APCA Lc estimate for additional design context.
Color-blindness simulation
Toggle protanopia, deuteranopia, tritanopia, or achromatopsia and watch the entire UI preview re-render through the lens. Machado 2009 matrices.
State-aware grading
Rest, hover, active, focus, disabled, and translucent-overlay scoring. Focus rings are tested against the 3:1 WCAG 1.4.11 requirement automatically.
Real UI previews
Dashboard, buttons, forms, tables, cards, charts, toasts, and marketing — your palette tested in production-shaped UI instead of abstract swatches.
Design-token exports
Tailwind v4 @theme, Tailwind v3 config, CSS variables, W3C Design Tokens JSON, Figma / Tokens Studio JSON, Swift UIColor, and Jetpack Compose Color.
Beyond one-off contrast checks: a complete color-system workspace
Most color tools stop at a contrast ratio between two hex codes. Production design systems need full 50–950 scales that hold up under hover, focus, disabled, and translucent overlay states; that work in light and dark mode; that survive deuteranopia; and that drop straight into Tailwind, Figma, iOS, and Android without hand-tuning. The Accessible Palette Studio builds that system from a single base color in one pass, then compares every pairing with WCAG 2.2 requirements and experimental APCA estimates so teams can make better-informed design decisions.
For design systems
Generate 88 OKLCH stops (8 families × 11 steps) plus semantic tokens for background, surface, foreground, border, primary, focus, danger, and more — ready for Tokens Studio or Style Dictionary.
For engineering teams
One click exports a working Tailwind v4 @theme block, a v3 config, CSS custom properties with dark mode, a Swift UIColor extension, and a Compose Color object. No copy-paste-fix loops.
For accessibility reviews
Every state of every interactive token is graded by both contrast models. The report card pinpoints exactly which pairing fails, in which state, under which scoring model — and tells you whether a CVD simulation breaks it further.
How the Studio builds an accessible color system
OKLCH lightness curve
Each stop targets a perceptually-uniform L* value, with chroma peaking around the 500 stop and tapering at the extremes so 50 stays subtle and 950 stays inky. Every stop is then gamut-mapped into displayable sRGB.
APCA Lc scoring
APCA computes a signed Lc estimate that respects polarity. The Studio uses configurable target bands to help compare text and interface colors. Treat these bands as experimental design guidance, not WCAG conformance thresholds.
Machado CVD transforms
Color-blindness simulations use 3×3 matrices from Machado, Oliveira & Fernandes (2009) applied in linear sRGB. The CSS filter is generated from the same matrices via SVG <feColorMatrix>, so every preview pixel — text, borders, charts — re-renders through the simulated lens.
Best practices
- Don't rely on color alone — pair it with icons, text, or shape
- Verify the report card in both light and dark mode
- If any state-aware row falls into "Caution" under both WCAG and APCA, fix it
- Treat the focus-on-surface row as load-bearing — many sites miss this
- Spot-check at least one CVD simulation before shipping
Accessible Palette Studio FAQ
APCA, OKLCH, CVD, and design-token exports — answered.
What is APCA and how does it differ from WCAG 2.2 contrast?
APCA (Accessible Perceptual Contrast Algorithm) is an experimental perceptual contrast model. It produces a signed Lc estimate that reflects polarity and is interpreted with text size and weight. The Studio shows APCA beside the normative WCAG 2.2 luminance ratio for design exploration; APCA results are not a WCAG conformance claim.
Why OKLCH instead of HSL?
HSL is mathematically convenient but not perceptually uniform — two HSL colors with the same lightness can look very different in brightness. OKLCH (a perceptual color space) keeps lightness consistent across hues, so an 11-stop scale generated in OKLCH actually steps evenly to the human eye. This is what makes the scales feel coherent across primary, secondary, and accent families.
Which color-blindness simulations are supported?
Protanopia (no red cones), deuteranopia (no green cones), tritanopia (no blue cones), and achromatopsia (full grayscale). The simulation uses the Machado, Oliveira & Fernandes (2009) transforms applied to linear sRGB, which is the model used by Chrome DevTools' vision deficiency emulator.
What does state-aware grading check?
Every interactive token (primary, secondary, accent, danger, etc.) is tested in its rest, hover, active, focus, and disabled states. Focus rings are graded against the 3:1 WCAG 1.4.11 non-text contrast requirement. Disabled states are flagged informationally — WCAG 2.2 exempts them, but APCA still surfaces unreadable combinations.
Can I export to Tailwind v4 and v3 at the same time?
Yes. The Studio generates a Tailwind v4 @theme block and a v3 tailwind.config.ts side-by-side, plus W3C Design Tokens Community Group (DTCG) JSON, Tokens Studio JSON for Figma, a Swift UIColor extension for iOS, and a Jetpack Compose Color object for Android. Pick any combination — your palette state is persisted in the URL so you can share it with your team.
Does the palette state save anywhere?
Your palette is encoded directly into the URL hash, so copying the address bar shares the exact palette with anyone. Nothing is sent to a server. Click "Share URL" to copy a ready-to-send link.
Essential Accessibility Resources
Comprehensive tools, checklists, and guides to help you create inclusive digital experiences