WCAG Colour Contrast Explained (and How to Pass It)

You have picked a palette you like, and somewhere in review someone says the text “fails contrast”. Here is what that actually means, what the numbers are, and how to fix it without throwing the design away.

What a contrast ratio is

Contrast ratio is a single number describing the difference in relative luminance between two colours — roughly, how light each one is once you account for the fact that human eyes are far more sensitive to green than to blue. It runs from 1:1 (identical colours, invisible) to 21:1 (pure black on pure white).

The important and counterintuitive part: it is about lightness, not hue. Two vivid, obviously different colours — a strong red and a strong green, say — can be almost identical in luminance and fail badly, while two shades of the same blue can pass comfortably. This is why “but they look completely different” is not an argument.

The numbers you actually need

• AA, normal text — 4.5:1. The realistic target for body copy, and what most teams mean by “accessible”.
• AA, large text — 3:1. Large means roughly 18pt (24px), or 14pt (about 18.7px) if it is bold.
• AAA, normal text — 7:1, and 4.5:1 for large text. A stricter standard, sensible for long-form reading.
• Non-text — 3:1. This is the one people forget: interface components and meaningful graphics need contrast too. A form input whose border you cannot see against the background fails, however lovely the label looks.

Where designs usually fail

• Grey placeholder and helper text. Light grey on white is the single most common failure, and it lands on exactly the text that explains what to do.
• Brand colour as body text. Mid-tone brand colours are often fine as a large heading and unreadable at 16px.
• Text over an image. The ratio changes across the photo. If you must, add a scrim or a solid panel behind the text — and test against the lightest part of the image.
• White text on a mid-tone accent. Buttons in particular: a colour that looks bold enough often is not.
• Disabled and hover states, which nobody checks.

How to fix a failure without redesigning

Almost always, adjust lightness and leave hue alone. Darkening the text or lightening the background a few steps usually gets you over the line while keeping the palette recognisably the same. If the colour is a fixed brand value, keep it for large headings, borders and fills, and pair it with a darker or lighter variant for body copy — that is what tonal palettes are for. Increasing font size or weight is also legitimate, since it changes which threshold applies.

Contrast is not the whole of colour accessibility

Passing 4.5:1 does not mean everyone can use your interface. Around one in twelve men has some form of colour vision deficiency, so any place colour alone carries meaning — red for error, green for success, a colour-coded chart — is a place some users get nothing. The fix is not more contrast, it is a second signal: an icon, a label, a pattern, a text change. Previewing your palette through a colour-blindness simulation makes those spots obvious fast.

Check it as you pick, not at review

Tintbox is a free Android app that does both checks while you are still choosing colours: a WCAG contrast checker that takes any two colours and gives you the ratio with clear AA and AAA pass/fail marks for normal and large text, and a colour-blindness simulator that previews a palette as it appears with protanopia, deuteranopia and tritanopia. It also generates five colour harmonies from any base colour, extracts palettes from photos, and exports to 17 developer formats including CSS, SCSS, Tailwind, SwiftUI and Compose. Fully offline, no account.

Get Tintbox on Google Play

More on the app: the Tintbox page. A contrast checker compares two colours you choose; it is a design aid, not a full accessibility audit.

Frequently asked questions

What contrast ratio do I need to pass WCAG?

For AA, 4.5:1 for normal text and 3:1 for large text. AAA asks 7:1 and 4.5:1. Interface components and meaningful graphics need 3:1.

What counts as large text?

About 18pt (24px), or 14pt (roughly 18.7px) when bold.

Why do two very different colours fail contrast?

Because the ratio measures relative luminance, not hue. Two colours can be wildly different in colour and nearly identical in lightness.

Does passing contrast make my design colour-blind friendly?

No. They are separate problems. If colour alone carries meaning, add a second cue — an icon, a label or a pattern — regardless of the ratio.

Get Tintbox on Google Play