Build your palette
| Swatch | Role | Hex (click to copy) | Contrast vs bg | AA normal | AAA normal |
|---|
Export your palette
Live preview
This is body text in your generated readable color. It comfortably exceeds the WCAG AA minimum of 4.5 : 1 against your chosen background.
This is secondary or muted text — dimmer than body copy, but still above the AA line so it stays readable.
Ratios use the WCAG 2.1 relative-luminance formula — the same one our single-pair contrast checker uses. Roles follow common practice: body text ≥ 4.5:1, large headings ≥ 3:1, UI borders ≥ 3:1 (SC 1.4.11). Want to scan a whole existing page instead? Try the free Accessibility Scanner.
How it works
Starting from your base color, each role is derived by adjusting lightness until its contrast ratio against the selected background clears the required threshold: body text targets ≥ 4.5:1 (AAA ≥ 7:1 when reachable without drifting far from the hue), muted text ≥ 4.5:1 at reduced prominence, borders ≥ 3:1, and surfaces are tints of the base. The math is identical to the WCAG specification — no approximations, no server round-trips.
← All free tools · Contrast checker · Full-page scanner · Color blindness simulator · Dansk version
Frequently asked questions
What do WCAG AA and AAA mean?
They are contrast levels from the Web Content Accessibility Guidelines. AA requires a contrast ratio of at least 4.5:1 for normal text (3:1 for large text); AAA raises this to 7:1. Every palette generated here shows the exact ratios so you can pick compliant pairs.
Is contrast ratio about text only?
Text needs to meet the thresholds above. Non-text UI elements like buttons, form borders and icons need 3:1 under AA. The generator labels which pairs are safe for each use.
Can I use the palette commercially?
Yes. The generated color combinations are yours to use in any project — palettes are derived from your base color mathematically and carry no license restrictions.
Does it work for dark mode designs?
Yes. Generate from a dark base color to get light text pairings, and check the ratios the same way. Dark mode often needs higher contrast than you expect — verify rather than eyeball.