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.