DocomintWCAG Accessible Palette Generator
Auto-adjust a text color's lightness until it passes WCAG AA or AAA contrast against a background.
Rather than just failing a color combination the way Contrast Checker does, this fixes it: it keeps your chosen color's hue and saturation intact and walks its HSL lightness toward black or white — whichever direction moves away from the background — one percentage point at a time until the WCAG ratio clears your target. The result stays recognizably "your brand color," just readable.
Example: A light gray (#9ca3af) on white only hits about 2.5:1 — nudging its lightness down in 1% steps lands on roughly #6b7280 at 4.6:1, clearing AA while staying the same gray hue rather than jumping to black.
How it works
- Enter your foreground and background colors and pick AA or AAA
- Lightness is nudged in 1% steps toward the readable direction on your device
- Get back an adjusted color that keeps your hue but passes the target ratio
Frequently asked questions
Does the WCAG Accessible Palette Generator change my color's hue?
No — it only adjusts lightness (moving the color toward black or white) while keeping hue and saturation fixed, so the result stays recognizably related to your original color rather than shifting to an unrelated hue.
What if no lightness adjustment can reach the target ratio?
The tool reports the closest ratio it could reach within that hue and saturation before hitting pure black or white, and flags that the target wasn't fully met — at that point, try a different background color, or accept a small hue/saturation shift outside what this tool automates.
Is my color values uploaded anywhere?
No — WCAG Accessible Palette Generator runs entirely in your browser using JavaScript/WebAssembly. Your color values is never sent to a server.