Accessible Color Palette Generator
Learn: Accessibility→Generate a palette, see every contrast ratio against WCAG AA and AAA, and fix the combinations that fail.
#24499E
hero
#B863E8
accent.primary
#E36178
accent.secondary
#C79137
accent.tertiary
#1F2024
neutral.dark
#F5F5F6
neutral.light
Color vision simulation
4 of 4 colors are readable as body text
- #24499EheroAAAAa7.64:1 on #F5F5F6AAAAa1.95:1 on #1F2024fail
- #B863E8accent.primaryAAAa4.64:1 on #1F2024AAAa3.22:1 on #F5F5F6fail
- #E36178accent.secondaryAAAa4.84:1 on #1F2024AAAa3.09:1 on #F5F5F6fail
- #C79137accent.tertiaryAAAa5.84:1 on #1F2024AAAa2.56:1 on #F5F5F6fail
A color counts as readable if it clears AA (4.5:1 for 16px body text) on at least one of your two neutrals. No single color can clear AA against both a near-white and a near-black background, so what matters is that each color works on the background you actually pair it with. Large text (24px, or 18.66px bold) needs 3:1 for AA and 4.5:1 for AAA; interface elements such as borders and icons need 3:1.
Every combination
#24499E | #B863E8 | #E36178 | #C79137 | #1F2024 | #F5F5F6 | |
|---|---|---|---|---|---|---|
| — | 2.4 | 2.5 | 3.0 | 2.0 | 7.6 | |
| 2.4 | — | 1.0 | 1.3 | 4.6 | 3.2 | |
| 2.5 | 1.0 | — | 1.2 | 4.8 | 3.1 | |
| 3.0 | 1.3 | 1.2 | — | 5.8 | 2.6 | |
| 2.0 | 4.6 | 4.8 | 5.8 | — | 14.9 | |
| 7.6 | 3.2 | 3.1 | 2.6 | 14.9 | — |
Export
How to read the contrast results
Contrast is a ratio between two colors' relative luminance, running from 1:1 (identical) to 21:1 (black on white). WCAG sets the bar by text size: normal body text needs 4.5:1 to pass AA and 7:1 to pass AAA, while large text — 24px, or 18.66px bold — only needs 3:1 for AA.
So a mid-grey like #949494 on white measures about 3.9:1. That fails AA for a paragraph, passes AA for a heading, and passes the 3:1 bar for a border or icon. One color, three different answers — which is why the list above reports a ratio rather than a single pass/fail stamp.
Each color is scored against both of your neutrals, but it only has to clear the bar on one of them. That is not a shortcut: no color can pass AA against both a near-white and a near-black background at once, because the luminance range where it clears 4.5:1 against white barely overlaps the range where it clears 4.5:1 against black. What matters is that a color works on the background you actually pair it with.
A color that fails on every background is the real problem — it cannot carry body text anywhere. For those, the Fix button searches in OKLCH for the nearest lightness that clears 4.5:1 on whichever neutral it is already closest to, keeping the hue and chroma so the color stays recognisably yours. The fix is applied only if it genuinely improves the palette.
Colorblind-safe by design
Around 8% of men and 0.5% of women have some form of color vision deficiency. The common cases — protanopia and deuteranopia — compress the red-green axis, so colors that look clearly different to you can arrive as the same color for roughly 1 in 12 of your male users.
This is not the same problem as contrast, and it is worth being precise about why. Contrast is a luminance ratio, and simulating color vision deficiency barely moves luminance. A red and a green at different lightness stay easy to tell apart — they simulate to an olive and a grey. It is a red and a green at matched lightness that collapse into one color. So the simulation here does not re-score contrast; it measures perceptual distance and flags only the pairs that genuinely merge.
Export to your stack
Every palette exports as CSS custom properties, a Tailwind v4 @theme block, W3C-style JSON design tokens, or Figma tokens — copy and paste, no account required.
The full workspace adds SCSS, Adobe swatches, SwiftUI, Compose, Android XML, Flutter, Material 3, and brand-guide PDFs, alongside saved palettes and scoring.
Frequently asked questions
- What makes a color palette accessible?
- An accessible palette is one where the color combinations you actually ship have enough contrast to be readable. In practice that means every text color clears 4.5:1 against the background it sits on, interface elements like borders and icons clear 3:1, and no two colors rely on hue alone to be told apart — because roughly 1 in 12 men cannot distinguish some hue pairs.
- What's the difference between WCAG AA and AAA?
- They are two levels of the same standard. AA requires 4.5:1 for normal body text and is the level most organisations are legally held to. AAA requires 7:1 and is stricter than most brand palettes can reach without going near-black on near-white. AA is the realistic target; treat AAA as a bonus on your most important text.
- What contrast ratio do I need for normal versus large text?
- Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text — 24px, or 18.66px if bold — only needs 3:1 for AA and 4.5:1 for AAA, because bigger letterforms stay legible at lower contrast. Interface components such as input borders and icons need 3:1 regardless of size.
- Can this generate a colorblind-safe palette?
- Yes. Switch on any of the four simulations — protanopia, deuteranopia, tritanopia, or achromatopsia — and the generator re-checks whether any two colors in your palette collapse into the same perceived color. That is a different question from contrast: color vision deficiency barely changes luminance, so a pair can pass contrast and still be indistinguishable. Only the pairs that genuinely collide are flagged.
- How do I export the palette to Tailwind or CSS?
- Pick a format under Export and copy the output. CSS variables give you a ready-to-paste :root block, Tailwind v4 gives you an @theme block, and JSON or Figma tokens suit design-token pipelines. Everything on this page is free and needs no account.
Related tools
Accessible colors are the first six steps of eleven.
Perfect Palette carries the same checks through the rest of the journey — approved pairings become semantic roles, roles become 10-step ramps, and the whole system exports to 26 formats with the contrast decisions recorded. Free to start, no account needed — color system tools are Plus, design.md authoring is Pro.