How to Check Colour Contrast Properly

The ratio, and where it comes from

WCAG contrast isn't a rough guide. It's a defined calculation, and it's worth knowing what it actually does to your colours.

Each channel goes from 0–255 to a 0–1 value, then gets linearised — at or below 0.04045 it's divided by 12.92, above that it becomes ((value + 0.055) / 1.055) raised to the power 2.4. Those linear channels are then weighted:

0.2126 red · 0.7152 green · 0.0722 blue

That gives relative luminance. The ratio is (lighter + 0.05) / (darker + 0.05).

Three landmarks tell you an implementation is right: black on white gives exactly 21, identical colours give exactly 1, and the classic #767676 grey on white gives 4.54.

Green does almost all the work

Look at those weights again. Green is 0.7152, blue is 0.0722 — nearly ten times less.

You can watch it in the tool. Set the text to each pure primary and its relative luminance comes back as exactly its own coefficient:

Pure colour on white	Relative luminance	Contrast
Blue	0.0722	8.59:1 — passes AAA
Red	0.2126	4.00:1 — fails AA body
Green	0.7152	1.37:1 — fails everything

Three fully saturated primaries, and the spread runs from comfortably AAA to unreadable. This is why nudging the blue channel of a colour barely moves its score while a small change to green moves it a lot — and why two colours that look about equally dark can land on opposite sides of a threshold.

Four thresholds, three numbers

Level	Body text	Large text
AA	4.5:1	3:1
AAA	7:1	4.5:1

AAA-large and AA-body are the same threshold. Clearing 4.5:1 means you satisfy AA for body text and AAA for large text at once.

Large means at least 18 point, or 14 point bold — roughly 24px and 18.5px at the standard 1pt = 1.333px conversion. Bold is the only place font weight enters the standard, and it buys you the easier threshold at a smaller size.

Why headroom, not a tick

Here's the case that decides it. Two greys on white:

• #767676 → 4.54:1, headroom +0.04. Passes.
• #777777 → 4.48:1, headroom −0.02. Fails.

One value on each channel. Now express those as a proportion of the 4.5 threshold: 1.01 and 0.995 — and the second one rounds to 1.00, which reads exactly like a pass.

That's why the tool reports a signed difference. The sign can't round into a lie, and it tells you how much room you have, which a tick never does.

Check the ceiling before you start nudging

Plain black or plain white is almost always the highest contrast available against any given background. So those two outputs bracket what's achievable before you adjust anything.

On a mid-grey #808080 background:

• Black text → 5.32:1
• White text → 3.95:1
• Best available → 5.32:1

Which means AAA body text is impossible on mid-grey. No text colour gets there. If you need 7:1, the background has to change — and knowing that at the start saves three rounds of adjusting the wrong thing.

Meeting the number is a floor

The ratio clears a bar. It doesn't make text readable on its own.

It says nothing about typeface or letter spacing, nothing about font size beyond the large-text threshold, and — importantly — nothing about colour vision deficiency. Two colours can meet 4.5:1 and still be hard to tell apart for someone with common colour blindness, because the ratio only compares lightness.

It also assumes a flat background. Text over a photograph or a gradient needs checking at its worst point, not its average, and that point usually isn't where you'd look first.

The ones people forget

When you check a palette, the main body text is rarely the problem. The failures cluster in:

• Placeholder and hint text — almost always the worst thing on the page.
• Disabled states, which are deliberately faint and still need to be perceivable.
• Link colours, which need checking against the background and against the body text around them.
• Focus and hover states, not just the resting state.

The printable has a table for working through pairs, because doing them one at a time in a browser tab is how three of them get missed.