♿ 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).
How the calculation works
From a single base colour, this tool builds a palette of ten lightness steps and shows each colour's contrast ratio against white and black. 1. The base colour is converted to HSL (hue, saturation, lightness). 2. Keeping hue and saturation, ten colours are made with lightness from 95% down to 8%. 3. Each colour's contrast ratio with white and black is calculated with the WCAG 2.x formula: Contrast ratio = (lighter relative luminance + 0.05) ÷ (darker relative luminance + 0.05) WCAG requires at least 4.5:1 for normal text (AA), 7:1 for AAA and 3:1 for large text (AA). You can see at a glance which shades work for text on a white or a black background.
Worked example
Base colour #2563eb (hue 221°, saturation 83%) Lightness 65%: #5c8af0 → 3.31 against white (AA for large text only) Lightness 55%: #2d69ec → 4.86 (AA for normal text) Lightness 45%: #134fd2 → 6.81 (AA) Lightness 35%: #0f3ea3 → 9.41 (AAA) So shades darker than 45% suit body text on white, and shades lighter than 65% suit body text on black.
Things to be aware of
- The same HSL lightness looks very different across hues (yellow looks bright, blue dark), so contrast at the same step varies a lot by hue.
- Contrast ratio is one guide to legibility. Also avoid conveying information by colour alone.
- APCA, under consideration for WCAG 3, calculates contrast differently.
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.