Accessible palettes, generated and verified
This generator produces random color combinations and only shows you the ones that pass WCAG contrast requirements. Instead of guessing whether your text is readable, every palette comes with the measured contrast ratio so you know it meets AA (4.5:1) or AAA (7:1) before you ship it.
How it works
Contrast is computed with the official WCAG formula. First each color’s relative luminance is found by linearising its sRGB channels:
channel = c / 255
linear = channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ^ 2.4
L = 0.2126*R + 0.7152*G + 0.0722*B
ratio = (Llight + 0.05) / (Ldark + 0.05)The tool randomly samples a background and text color, measures the ratio, and rejects the pair if it falls below your chosen threshold. It repeats until both the text and the accent color clear the bar — so the displayed palette is always compliant.
Understanding AA vs AAA
The difference between the two levels matters for your use case:
| Level | Normal text | Large text | Who should target it |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | Legal minimum in most jurisdictions; required by WCAG 2.1 |
| AAA | 7:1 | 4.5:1 | Recommended for body copy; required for highest accessibility rating |
Large text means 24px or 18.66px bold. The generator lets you target either level so you can pick the threshold that fits your product’s obligations or ambitions.
Worked example
Suppose you pick AAA mode and the generator returns:
- Background:
#f9f5ff(near-white lavender) - Text:
#1a0a40(deep indigo) - Contrast ratio: 12.8:1
Both text and accent colors cleared the 7:1 threshold. Paste those hex codes into your CSS directly — the compliance is already proven by the number shown.
What contrast doesn’t cover
A passing ratio means bright-versus-dark is adequate, but it does not guarantee hue distinguishability for color-blind users. Around 8% of men have some form of color vision deficiency. Best practice after picking a palette:
- Run the accent color through a color-blindness simulator.
- Verify interactive states (hover, focus, active) still meet contrast in their altered form.
- Test on real devices — screens vary in gamma and brightness.
Tips
- Reserve AAA for body copy and dense reading surfaces; AA is usually sufficient for UI controls and icons.
- The accent color in each palette is also verified against the background, so it’s safe for buttons and links on that background.
- Generating several palettes and comparing the ratios helps you build an intuition for how far apart luminance values need to be to pass each level.