Colour contrast checker

The thresholds, in plain numbers

• 4.5:1 — normal text, to meet AA. This is the one that applies to almost everything you write.
• 3:1 — large text at AA. Large means 24px and over, or 18.66px and over when bold.
• 3:1 — anything non-text that carries meaning: icons, form field outlines, focus rings, chart lines, the border that shows which tab is selected.
• 7:1 and 4.5:1 — the same two, raised to AAA.

The large-text exemption is the one that costs people. A 20px semibold heading is not large text and needs the full 4.5:1 — the bold allowance starts at 18.66px and the plain one at 24px. Designs routinely assume a heading is exempt because it looks big, and it is the headings that then fail an audit.

Where the number comes from

Each channel is scaled to 0–1, linearised to undo the gamma curve your screen applies, and weighted 0.2126 red, 0.7152 green, 0.0722 blue — green dominates because human vision is most sensitive to it. That gives relative luminance. The ratio is (lighter + 0.05) ÷ (darker + 0.05).

The 0.05 is a flare term standing in for the light your screen reflects from the room. It is why the maximum possible ratio is 21:1, black on white, rather than infinity — and why two very dark colours are closer together in ratio than they look.

A worked check you can do against any tool: #767676 on white is 4.54:1 and passes AA, while #777777 is 4.48:1 and fails. One hex step apart. If a checker disagrees with those two numbers, it is not implementing WCAG.

Why the fix keeps your hue

When a pair fails, the useful answer is not "pick another colour" — you chose that colour for a reason. Contrast is driven by lightness, not hue, so the suggestion above holds your hue and saturation and walks the lightness in both directions until one passes, then offers whichever moved least.

Sometimes neither direction works, and the tool says so instead of offering something that does not pass. A saturated mid-tone against a mid grey can be unreachable at every lightness, because both ends run out of contrast before they get there. When that happens the background is the thing to change.

This is also why yellows and light greens are so hard on white and deep blues so hard on black: their luminance is naturally near one end. It is not a failure of the palette, it is arithmetic, and it is better to know before the brand guidelines are signed off.

Passing is a floor, not a finish line

A ratio is one measurable thing among many, and clearing it does not make a design accessible. It says nothing about:

• Colour carrying meaning on its own — a red border marking an invalid field is invisible to a lot of people. It needs text too.
• Focus visibility — the outline that shows where the keyboard is has its own 3:1 requirement, and removing it is one of the most common accessibility failures on the web.
• Text over images, where the ratio changes across the picture and the worst spot is the one that counts.
• Real conditions — a phone in sunlight, an old screen, tired eyes at midnight.

We check contrast on rendered elements against the actual painted background rather than against the palette, on every page of this site, because a token says what a colour is meant to be and the browser says what it is.

Contrast is one clause of WCAG. If you are a US business trying to decide whether the rest of it belongs in the brief, we wrote that out: why US businesses actually care about WCAG.

Questions

What ratio do I need?

4.5:1 for normal text and 3:1 for large text, to meet WCAG AA. Large means 24px and over, or 18.66px and over when bold — not "looks big". Non-text things that carry meaning — icons, form outlines, chart lines, focus rings — also need 3:1. AAA raises the text figures to 7:1 and 4.5:1.

What counts as large text?

24 CSS pixels or larger, or 18.66 pixels or larger if the text is bold. That is 18pt and 14pt bold in the original wording. It is a common and expensive mistake to assume a heading qualifies — a 20px semibold heading does not, and needs the full 4.5:1.

Why does it fail on white but pass on black?

Because contrast is a ratio between two luminances, and a mid-tone colour sits far from neither white nor black. Yellows and light greens have high luminance and are hard to use on white at any saturation; deep blues and purples have low luminance and are hard on black. The hue is not the problem, the lightness is — which is why the suggestion above moves lightness and keeps your hue.

Does passing mean it is accessible?

No. It means one specific failure has been avoided. The ratio says nothing about text size, line length, whether colour alone carries meaning, focus visibility, text over images, or whether the thing is readable in sunlight. It is a floor, and clearing a floor is not the same as being good.

Is anything sent anywhere?

No. The arithmetic runs in your browser; the colours you type never leave it.

More tools

• JSON formatterFormat, minify and validate — and when it breaks, the exact line, column and caret, because browsers do not give a position for the mistakes people actually make.
• Base64 & URL encoderBoth directions, with correct UTF-8 — a plain btoa throws on Arabic and emoji and quietly returns a different string for an accent. Both fixed here.
• Number base converterBinary, octal, decimal, hex and any base to 36 — in BigInt, so a 64-bit id converts exactly instead of quietly losing its last digit the way parseInt does.
• Image compressorSmaller images without sending them anywhere — and it strips the GPS location your camera wrote into the file. Every popular compressor uploads what you give it; this one cannot.
• Age calculatorExact age in years, months and days — worked out on the calendar rather than by dividing by 365 — with the Hijri date and the next birthday.
• BMI calculatorYour BMI on both the WHO international thresholds and the Asian cut-offs, where the risk starts lower — plus your healthy weight range in kg. Most calculators show only the first.

All free, all running entirely in your browser. Built by Maxverse Lab, a remote software studio. Every tool.