Accessible Color Palette Generator
Pick one base color and get a full palette — text, muted text, border and surface shades — where every combination passes WCAG 2.1 AA, with AAA marked where it does. Everything runs in your browser; nothing is uploaded.
Build your palette
Or pull the colours from an image
Drop a logo or a screenshot here, paste it (Ctrl+V), or — it is read in your browser, nothing is uploaded. Click a colour to use it as the base.
| 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.
The palette calculates the color you chose. The scanner measures the one that shipped.
The generator is free, and it does the whole color job: one base color in, contrast ratios for body text, large headings, borders and surfaces out, calculated with WCAG 2.1's own formula. That does not change with a licence.
What no color generator can see is what actually got published. A theme, a plugin or a colleague can change the contrast on a page you never touched. The free scanner already runs the 15 automated checks against a real URL — alt text, form fields, headings, contrast, ARIA, frames and tables. EUComply Pro adds the GDPR/cookie and NIS2/security checks on top (18 more), so it becomes 33 checks in all: whether a privacy link exists, whether a page that really loads tracking is missing a consent banner, and whether HSTS and a content security policy are set in the response. The report is a pdf report you can send on. $79/year per website.
| Plan | Free | EUComply Pro |
|---|---|---|
| What you get |
|
|
| Price | $0no licence key needed | $79/year per website |