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