Loading...
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 →
Royal Blue
Auto-derived (+210° hue)
Auto-derived (+120° hue)
Hue bias for grays
Last updated 2 minutes ago
Active users
12,438
+8.2%
Revenue
$48.2k
+12.1%
Bounce rate
32.4%
−1.8%
Avg. session
4m 12s
+0.4%
Perceptually-uniform shade systems — 50 through 950 — across primary, secondary, accent, neutral, success, warning, danger, and info. Light/dark mirror automatically.
Every pairing is graded by both the WCAG 2.2 luminance ratio and APCA Lc (the WCAG 3 draft model). Catch dark-mode contrast issues that WCAG 2.2 misses.
Toggle protanopia, deuteranopia, tritanopia, or achromatopsia and watch the entire UI preview re-render through the lens. Machado 2009 matrices.
Rest, hover, active, focus, disabled, and translucent-overlay scoring. Focus rings are tested against the 3:1 WCAG 1.4.11 requirement automatically.
Dashboard, buttons, forms, tables, cards, charts, toasts, and marketing — your palette tested in production-shaped UI instead of abstract swatches.
Tailwind v4 @theme, Tailwind v3 config, CSS variables, W3C Design Tokens JSON, Figma / Tokens Studio JSON, Swift UIColor, and Jetpack Compose Color.
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 grades every pairing against both WCAG 2.2 and the WCAG 3 APCA draft so you can ship today and be ready for what's next.
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.
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.
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.
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 computes a signed Lc value that respects polarity. Lc ≥ 75 is recommended for body text, ≥ 60 for large text, ≥ 45 for non-text UI elements. Unlike WCAG 2.2 ratios, APCA accounts for the asymmetric perception of dark text on light backgrounds versus light text on dark.
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.
APCA, OKLCH, CVD, and design-token exports — answered.
APCA (Accessible Perceptual Contrast Algorithm) is the contrast model under consideration for WCAG 3. It computes Lc, a signed value typically between −108 and +106, that accounts for font size, weight, and polarity (light vs. dark backgrounds). WCAG 2.2 uses a luminance ratio (e.g. 4.5:1) which can incorrectly pass or fail certain dark-mode color combinations. The Studio shows both side-by-side so you can future-proof a palette without losing your current 2.2 compliance.
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.
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.
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.
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.
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.
Comprehensive tools, checklists, and guides to help you create inclusive digital experiences