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
Perceptually-uniform shade systems — 50 through 950 — across primary, secondary, accent, neutral, success, warning, danger, and info. Light/dark mirror automatically.
Every pairing includes the normative WCAG 2.2 luminance ratio and an experimental APCA Lc estimate for additional design context.
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 compares every pairing with WCAG 2.2 requirements and experimental APCA estimates so teams can make better-informed design decisions.
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 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.
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 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.
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