Colour Contrast and WCAG, Explained Without the Jargon

Good contrast is invisible. You only notice it when it's missing — the grey caption you gave up on, the button label that dissolved in sunlight, the placeholder text you had to lean in to read. Every one of those is a contrast failure, and every one of them is measurable.

Here's what colour contrast actually is, what the WCAG numbers mean in plain terms, and how to fix a pair that fails without throwing away the colour you liked.

Contrast is a ratio, not a vibe

Contrast between two colours is expressed as a ratio, from 1:1 to 21:1. Identical colours are 1:1 — invisible. Pure black on pure white is 21:1 — the maximum. Everything you'll ever design sits somewhere in between.

That number comes from comparing how much light each colour reflects, so it tracks brightness far more than hue. That has a surprising consequence: two colours can look boldly different and still fail, if they happen to be similar in lightness. A saturated red and a saturated green feel like opposites, yet their contrast can be dismal — which is exactly the trap that catches so many "vibrant" designs.

Numbers you actually need

WCAG — the Web Content Accessibility Guidelines — sets the thresholds, and there are really only three to remember:

• 4.5:1 — the bar for normal body text. This is level AA, the one most of the world treats as the baseline and much of it treats as the law.
• 3:1 — the bar for large text (roughly 24px, or 18.66px if bold) and for non-text things like icons, form borders and focus rings. Bigger shapes need less contrast to stay legible.
• 7:1 — level AAA, the stricter tier for body text. Worth aiming for on long reading and anything a low-vision user relies on, but not always practical everywhere.

That's the whole rulebook, more or less. AA for normal text, 3:1 for the big and the graphical, AAA when you can reach it.

Why "looks fine to me" is a trap

Your monitor is bright, your eyes are (probably) sharp, and you're sitting indoors. Your visitors are a different story. Somewhere between five and eight percent of men have some form of colour vision deficiency. A large share of people are reading on a phone, outdoors, at an angle, on a cracked screen at 40% brightness. And plenty of your audience is simply older, with the reduced contrast sensitivity that comes with age.

"Looks fine to me" is a sample size of one, tested in the best possible conditions. A ratio is the honest check, because it doesn't care how good your eyesight is today.

How to fix a failing pair (without losing the colour)

The instinct, when a pair fails, is to swap in a totally different colour. You rarely need to. Contrast is mostly about lightness, so the fix is usually to move one colour lighter or darker while keeping its hue.

Say your brand teal fails behind white text. Don't reach for navy — just deepen the teal until the ratio clears 4.5:1. It's the same colour family, a shade or two down, and the label snaps into focus. The Contrast Checker does this for you: enter a pair, and if it fails, its Accessible Alternatives hand you tuned versions of your own hue that pass, so you keep the identity and lose only the illegibility.

If you're choosing the colour from scratch, you can head the problem off earlier — nudge lightness in the Picker and watch the contrast readout, or check a whole scheme against its background before you commit.

Contrast is necessary, not sufficient

One more thing, because it's the mistake even careful teams make: passing contrast doesn't make a design accessible, it just clears one bar. The other half is never relying on colour alone to carry meaning.

A red "error" and a green "success" that differ only in colour are invisible to someone who can't tell red from green — no matter how strong the contrast. Add a word, an icon, an underline, a shape. Colour should reinforce the message, never be the only one carrying it.

Common questions

What contrast ratio do I need?

4.5:1 for normal text, 3:1 for large text and UI elements like icons and borders, 7:1 if you're aiming for the stricter AAA level.

Does contrast apply to buttons and icons too?

Yes. Meaningful non-text elements — icon buttons, input borders, focus outlines — need at least 3:1 against what's behind them.

Can a colourful design still fail?

Easily. Contrast follows lightness, not saturation, so two vivid colours of similar brightness can flunk. Always check the number rather than trusting how bold it looks.

Readability isn't a nicety you add at the end — it's a number you can hit on purpose. Drop your text and background into the Contrast Checker and find out in one glance whether everyone can read what you wrote.