Skip to content
VerscalaScan website

Accessible colour palette generator

Pick a base colour and a scheme, and get a harmonious palette — but unlike a typical palette tool, every swatch here also shows its real WCAG contrast: the more readable of black or white text, the exact ratio, and a Level AA pass or fail. An accessible palette, not just a pretty one. Free, instant, no sign-up.

Base colour

One colour and its opposite on the colour wheel (base hue + 180°).

  • rgb(68, 80, 183)

    hsl(234, 46%, 49%)

    AA text: Pass

    Base colour

  • rgb(182, 171, 67)

    hsl(54, 46%, 49%)

    AA text: Pass

Each swatch shows the more readable of black or white text on it, with the exact WCAG contrast ratio and an AA pass/fail — that is what makes a palette accessible, not just harmonious. For contrast between two colours of your choosing (e.g. text on a background from this palette), use the contrast checker.

Why accessible palettes matter

A palette that looks good in a mood board can still fail real readers. If the text colour you plan to put on a swatch does not have enough contrast against it, people with low vision, many older users, and anyone in bright sunlight or on a low-quality screen will struggle to read it — regardless of how well the hues go together. Contrast is not a matter of taste; it is a measurable, testable property of two colours.

How the contrast is computed

For each swatch, we compute the WCAG contrast ratio against both pure black and pure white and keep whichever is higher — the same relative-luminance formula defined by WCAG 2.2 Understanding 1.4.3 and used by our own scanner. The badge reads “Pass” when that ratio reaches 4.5:1, the Level AA threshold for normal text. Want to check contrast between two colours of your own choosing — say, a swatch as a background behind a specific text colour? Use the full contrast checker.

What this does — and doesn’t. The colour scheme (complementary, triadic, and so on) is generated by rotating hue on a standard colour wheel — that part is aesthetic guidance, and reasonable people can disagree on which scheme looks best for a given project. The contrast ratio and AA pass/fail next to each swatch are not guidance — they are exact arithmetic against the published WCAG formula. Trust the numbers for accessibility decisions; treat the harmony as a starting point for your own eye.

A palette is a start. Your whole site is more.

Getting your colours right is one important step. Point our free scanner at a real URL and it checks the whole page against WCAG 2.2 — contrast included — and tells you what to fix first, with the legal context for the site’s jurisdiction.

Scan a full page — freeOr find a specialist to fix it →

Want the full pass/fail matrix for one colour pair? Try the contrast checker, or see what our scanner covers, criterion by criterion.

Other free checkers

All free checkers