Colour
Contrast checker
Two colours and it tells you the contrast ratio, whether it passes AA and AAA for normal and large text, and how it actually looks. And when it fails, it offers the closest colour that passes — which is what you need when there is a brand involved and you cannot change all of it.
Your images and your colours never leave this page.
Why it matters that this is not uploaded
Two of these four tools work with images, and what gets dragged in here is hardly ever just any photo: it is a client's logo before launch, a screenshot of an internal dashboard, or an unpublished product shot. Sending that to a stranger's server to pull a colour out of it is a bad trade, and an unnecessary one: reading an image's pixels needs no server — the browser does it with the canvas it already ships with. Here there is nowhere to send it.
What people use it for
- Reviewing a site before launchThe text and background pairs that are actually used, one at a time.
- Fixing a grey that falls shortThe classic case: a light grey on white that looked fine on the designer's monitor.
- Defending a design decisionA number is easier to argue about than "it reads fine to me".
- Adjusting a brand colourFinding the closest variant that passes while still being the brand's colour.
- Checking a dark modeContrast in dark is almost never the same as in light, and has to be measured separately.
- Choosing a button colourMaking sure the button's label reads on its background, which is where it fails most.
Why this matters
Around one person in twelve sees colour differently, and virtually everyone loses some ability to tell contrasts apart with age. On top of that comes the everyday: a phone in the sun, an old monitor, the brightness turned down to save battery. Low-contrast text is not a minority problem: it is nearly everyone's problem at some point.
And it is one of the few accessibility problems that a number settles. Nothing to interpret: you measure it, and it either passes or it does not.
What the contrast ratio measures
It compares the luminance of the two colours — how much light each puts out — and gives a number between 1 and 21. One is a colour against itself; 21 is pure black on pure white, the maximum possible.
The detail that makes this calculation non-trivial: the colour values are not used as they are. First you have to undo the correction screens apply, because 128 in a channel does not emit half the light of 255 but considerably less. Doing it with the raw numbers gives results that look reasonable and are wrong, and it is a common mistake in home-made calculators.
The levels, and which one applies to you
AA asks for 4.5:1 on normal text and 3:1 on large text. It is the level most regulations require and the sensible minimum for any website.
AAA asks for 7:1 and 4.5:1. It is demanding and cannot always be reached while keeping a brand's identity; it applies where the content is critical.
"Large text" means 18 point — about 24 pixels — or 14 point bold — about 18.7 pixels. The logic is that a thicker stroke stays legible at lower contrast, which is why headings get some slack and body text does not.
The fixer
This is what people actually come here for. Knowing a colour fails is no use on its own: what you need is a similar one that passes, because there is usually a brand behind it and you cannot change all of it.
When the pair falls short of 4.5:1, the tool finds the nearest colour that reaches it by moving only the lightness and keeping the hue — so the result is still recognisably your colour — and offers both options: change the text or change the background, ordered by how far you have to move. Before proposing anything it checks that the proposal really passes; and when it is impossible without changing the hue, it says so rather than offering something that does not work.
The thresholds, in one table
| What | AA | AAA | Note |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | Anything not large: paragraphs, labels, captions, menus. |
| Large text | 3:1 | 4.5:1 | From 18 point (≈24 px), or 14 point bold (≈18.7 px). |
| Icons and controls | 3:1 | — | Field borders, focus indicators, icons that carry meaning. |
| Decorative text | — | — | Purely decorative or invisible text has no threshold. |
| Logotypes | — | — | Brand names and logos are outside the requirement. |
Frequently asked questions
What contrast ratio do I need?
4.5:1 for normal text and 3:1 for large text. That is level AA, which most regulations require and the sensible minimum for any website.
Level AAA asks for 7:1 and 4.5:1 respectively. It is demanding and cannot always be reached without giving up a brand's identity; it is reserved for critical content.
What counts as "large text"?
18 point, which is about 24 pixels; or 14 point bold, which is about 18.7 pixels.
The logic is that a thicker stroke stays legible at lower contrast. That is why a heading can get away with a colour that would not read in a paragraph.
Why does the number differ from another tool's?
Almost always because the other one works out luminance from the colour values as they are, without first undoing the correction screens apply. That gives numbers that look reasonable and are not the standard's.
Here it follows the official calculation. You can check it with two known cases: black on white must give exactly 21, and the grey #767676 on white must give 4.54, which is exactly what scrapes it past AA.
Does contrast apply to icons too?
Yes, with a different threshold: non-text elements — icons, form field borders, the focus indicator — need 3:1.
It is a separate and more forgiving criterion, because an icon is usually a larger, thicker shape than a letter. The tool's table includes it.
If I change to the colour it suggests, is it still my brand colour?
It is as close as possible. The suggestion moves only the lightness and keeps the hue and saturation, so it is still recognisably the same colour, lighter or darker.
And it looks for the smallest move that works: one point less would already fail. If even that is too much for your brand, the alternative is changing the background, which the tool also works out.
Does passing AA make me accessible?
No, it is one part. Contrast is one of the few criteria settled by a number, which makes it a good place to start, but real accessibility covers much more: keyboard navigation, alternative text on images, headings in order, labelled form fields.
That said: bad contrast hurts everyone with a screen in the sun, so fixing it pays back immediately.
The other colour tools
Picker and converter
Colour wheel with HEX, RGB, HSL, HSV, CMYK and CSS name in sync. With an eyedropper for any photo.
Palette generator
The 50 to 900 scale and the five classic combinations, ready to copy as CSS, Tailwind, JSON or an image.
Extract from an image
A photo's dominant colours with the percentage each covers. The image never leaves the browser.