♿ Accessible Palette Generator
Choose a single base color, and this tool generates a 10-step palette that keeps the same hue while varying the lightness, showing each color's contrast ratio against white and black text (per WCAG 2.1) at the same time. Combinations with a contrast ratio of 4.5:1 or higher get a pass mark. Handy for planning accessible color choices for a website or app.
How to use
- Pick a base color using the color picker or by entering a HEX code.
- A 10-step lightness palette is generated automatically.
- Click any color to copy its HEX code. The badges show the contrast ratio against white and black text and whether it passes the WCAG AA threshold (4.5:1 or higher).
FAQ
What does a 4.5:1 contrast ratio mean?
It's the minimum contrast ratio required for normal-sized text under WCAG (Web Content Accessibility Guidelines) 2.1 Level AA. Meeting this threshold makes text easier to read for people with low vision.
How is the 10-step palette determined?
It keeps the hue and saturation of your chosen base color fixed while varying the lightness across 10 steps, from 95% down to 8%.
Is the threshold the same for large text, like headings?
No, under WCAG AA, large text (18pt or larger, or 14pt bold) only needs a 3:1 contrast ratio to pass. This tool checks against the 4.5:1 threshold for normal-sized text.