Online Tool Store
Accessible Palette Suggester
Check any text/background color pair against WCAG contrast requirements, with an automatic same-hue suggestion when it fails. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
How it works
- Pick a text color and a background color.
- The contrast ratio is calculated using the WCAG relative luminance formula.
- If it fails the 4.5:1 AA threshold, a same-hue color with adjusted lightness is suggested that passes.
The formula
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker one. Relative luminance weights the linearized red, green, and blue channels as 0.2126R + 0.7152G + 0.0722B.
FAQ
What is WCAG contrast ratio?
A measure from 1:1 (no contrast) to 21:1 (black on white) defined by the Web Content Accessibility Guidelines, used to ensure text is readable for users with low vision.
What's the difference between AA and AAA?
AA requires at least 4.5:1 for normal text (3:1 for large text) — the standard most sites target. AAA requires 7:1, a stricter standard for enhanced accessibility.
How is the suggested color chosen?
It keeps your text color's hue and saturation, and adjusts only its lightness — darker or lighter — until the contrast ratio against your background reaches 4.5:1.
Are my colors sent anywhere?
No — contrast is calculated with the official WCAG relative luminance formula, entirely in your browser.
How we compare
| Feature | Online Tool Store | WebAIM contrast checker | Manual eyeballing |
|---|---|---|---|
| Official WCAG formula | ✓ | ✓ | ✗ |
| Suggests a passing color automatically | ✓ | ✗ | ✗ |
| No sign-up | ✓ | ✓ | ✓ |
If a color combination fails, this doesn't just tell you — it gives you a same-hue alternative that passes, so you don't have to guess.