Processed entirely on your device — nothing is uploaded
How to use the colour palette & contrast checker
- 1Drop an image in to pull out its dominant colours.
- 2Copy any swatch as hex, or copy the whole palette at once.
- 3Enter a text and background colour in the contrast checker below.
- 4Read the ratio and which WCAG levels it passes.
How the palette is chosen
Naive palette extraction buckets pixels by hue and reports the most common buckets. It produces confident-looking results that frequently bear no resemblance to the image, because photographs are dominated by desaturated colours that hue-bucketing throws away.
This uses median-cut quantisation instead. The full set of sampled pixels is treated as a cloud in colour space, repeatedly split along whichever axis has the widest spread, and each resulting group is averaged. The effect is that the palette reflects where the colours actually cluster, including the muted tones that give a photograph its character.
Pixels are sampled rather than read exhaustively — a twelve-megapixel image is forty-eight megabytes of data, and sampling twenty thousand points gives a result indistinguishable from reading all of them at a fraction of the work. Transparent pixels are ignored, so a logo on a transparent background yields the logo's colours rather than a wash of nothing.
What contrast ratio actually measures
The WCAG contrast ratio compares the relative luminance of two colours, on a scale from 1:1 (identical) to 21:1 (black on white). It is not a simple brightness difference: each channel is gamma-corrected first and then weighted, with green contributing far more than red and red far more than blue, because that is how human vision responds.
This is why two colours that look similarly bright can have very different contrast against the same background, and why judging contrast by eye is unreliable — particularly on a good monitor in a well-lit room, which is not how most of your readers will see it.
The thresholds are specific. Normal body text needs 4.5:1 to meet AA and 7:1 for AAA. Large text — 18pt, or 14pt bold — needs 3:1 for AA and 4.5:1 for AAA. Interface components and graphical objects such as icons and input borders need 3:1. Those numbers come from research on low-vision readability, not from taste.
Why this matters beyond compliance
Around one in twelve men has some form of colour vision deficiency, and a far larger group has reduced contrast sensitivity through age or eye conditions. Contrast is the single most common accessibility failure on the web, and it is also among the easiest to fix.
There is a legal dimension in many jurisdictions — public sector bodies in the EU and UK, and organisations covered by the ADA in the US, have faced action over inaccessible sites — but the practical argument is stronger. Low-contrast text fails for everyone in bright sunlight, on a cheap laptop screen, or at the end of a long day.
The most common design pattern that fails is light grey placeholder or secondary text on white. It looks refined in a design tool on a calibrated monitor and becomes invisible in real conditions. If you check one thing on your interface, check that.
Using the two together
The natural workflow is to extract a palette from a photograph, logo or reference design, then test the candidate text and background pairs from that palette before committing to them. A brand colour that looks strong as a swatch frequently fails as body text on white, and it is much cheaper to discover that now than after it is built.
When a pair fails, the fix is almost always to adjust lightness rather than hue. Darkening a colour for text on a light background preserves the brand identity while lifting the ratio — the hue stays recognisable, and readers do not notice the shift.
Reserve the brand colour at its original saturation for large headings, buttons and accents, where the 3:1 threshold applies and it will usually pass comfortably.
Frequently asked questions
What contrast ratio do I need?
4.5:1 for normal body text at AA, 7:1 at AAA. Large text (18pt, or 14pt bold) needs 3:1 at AA. Interface components and icons need 3:1.
Why can I not just judge contrast by eye?
The ratio is a gamma-corrected, channel-weighted calculation, not a brightness difference. Two colours that look equally bright can score very differently — and your monitor is better than most readers'.
How is the palette extracted?
By median-cut quantisation over sampled pixels, which reflects where colours actually cluster — including muted tones that simple hue-bucketing discards.
My brand colour fails as body text. What now?
Darken it rather than changing the hue. The identity survives and the ratio rises. Keep the original saturation for headings and buttons, where 3:1 applies.
Does this handle transparent images?
Yes — transparent pixels are ignored, so a logo on transparency yields the logo's own colours.
Is my image uploaded?
No. Sampling and the contrast maths both run in your browser.