WCAG Colour Contrast: What does the 4.5:1 ratio actually mean?

Anyone who has worked with web accessibility will likely be familiar with the WCAG Colour Contrast Requirements. These guidelines specify that text (and images of text) must have a contrast ratio of at least 4.5:1 (at Level AA).

But have you ever wondered what that 4.5:1 ratio actually means?

This article explains where the contrast ratio comes from, how it’s calculated, and why it improves readability in real-world conditions.

First, what exactly is colour contrast?

Colour contrast refers to the perceptible difference between text and its background. This contrast is crucial for readability, affecting both legibility and accessibility for everyone - especially those with vision impairments. It plays a key role in how easily users can engage with your content.

So what does 4.5:1 actually describe? In plain terms, it’s how much brighter your text is than its background (or the other way round) - and the bigger that gap, the easier the text is to read. It isn’t a number someone picked at random. It comes from the way our eyes perceive brightness, and it’s set to keep text readable for people with all kinds of vision, colour blindness included. We’ll get to where the 4.5 number itself comes from a bit further down.

Different types of colour vision

Not everyone sees colour the same way, and that matters a great deal when it comes to contrast. Colour blindness, or Colour Vision Deficiency (CVD), affects roughly 1 in 12 men and 1 in 200 women. Usually it’s a milder form, where one type of colour-sensing cone is weakened rather than missing entirely (a reduced sensitivity to green, called deuteranomaly, is the most common of all). The three main types, shown below at their strongest, are:

Protanopia (red-weak): trouble telling red and green apart, with reds also looking darker
Deuteranopia (green-weak): similar red-green confusion, but without reds looking darker
Tritanopia (blue-weak): trouble telling blue and yellow apart, and much rarer than the other two

Below is an interactive demonstration, using a photo from Magda Ehlers on Pexels, that shows how people with different types of colour vision perceive the same colour spectrum.

Select a colour vision deficiency:

Original image showing typical colour vision view

You might notice that there’s not much difference between protanopia and deuteranopia in the demonstration above. This isn’t a mistake - both deficiencies are forms of red-green colour blindness that affect our eyes in remarkably similar ways. The key difference? Protanopia affects the red-sensitive cone cells in our retinas, while deuteranopia affects the green-sensitive ones. Because these cone cells work together to help us distinguish colours, the end result looks quite similar, though protanopia tends to make reds appear slightly darker.

Tritanopia, on the other hand, looks noticeably different because it affects our blue-sensitive cone cells, which operate more independently from the red and green receptors. This is why the tritanopia simulation shows such a distinct shift in how blues and yellows are perceived.

This visualisation helps explain why colour alone should never be used to convey information - what might be an obvious colour difference to someone with typical colour vision could be indistinguishable to someone with CVD. That’s actually its own WCAG rule, SC 1.4.1 Use of Color (Level A), and it’s separate from contrast: it’s about never relying on hue alone, like error text that’s only red, or links set apart from body text by colour with no underline. This is why maintaining proper contrast ratios is crucial for accessibility, regardless of how users perceive colour.

What the heck is relative luminance?

Relative luminance is just a measure of how much light a colour gives off, on a scale from 0 (black) to 1 (white). It’s worked out from the red, green and blue that make up a colour, but the three don’t count equally: green makes up around 72% of the brightness we perceive, red about 21%, and blue only 7%. That’s simply how sensitive our eyes are to each one.

This helps explain why some colour combinations are easier to read than others. It’s also why pure blue (0,0,255) looks so much darker than pure green (0,255,0) to our eyes, even though both are cranked up to maximum: green pulls most of the weight, blue barely any. A dramatic difference in luminance.

So how is the ratio worked out?

If you like the specifics, the formula is (L1 + 0.05) / (L2 + 0.05) - the lighter colour’s luminance over the darker one’s, with a small +0.05 added to each to allow for screen glare. That little offset is why the scale caps at 21:1 for black on white rather than shooting off to infinity, and it’s also why 4.5:1 doesn’t mean your text is literally four and a half times brighter.

You’ll rarely do this by hand, mind you. But it’s a genuinely useful thing to know that mid-grey #767676 on white lands almost exactly on 4.5:1, which makes it about the darkest grey you can safely use for body text on a white background. Nudge it any lighter and it starts to fail.

A note on APCA and WCAG 3

APCA (Accessible Perceptual Contrast Algorithm) is a newer, perceptually-based contrast method developed by Myndex Research. It was explored as a candidate for WCAG 3, but the W3C removed it from the WCAG 3 working draft in 2023, and as of 2026 the draft doesn't specify any contrast algorithm yet. WCAG 3 itself is still an early working draft (not expected to be finalised until the late 2020s), so WCAG 2.2's 4.5:1 remains the standard to build to today. APCA is worth knowing as a likely direction of travel, not a current requirement.

APCA produces an Lc value (Lightness contrast value) instead of a ratio, where higher values indicate better readability.
Required contrast varies based on font size and weight, rather than a single fixed threshold.
Light text on dark backgrounds and dark text on light backgrounds are treated differently (the Lc value is signed: positive for dark text on light, negative for light text on dark).
Some colour combinations that pass the 4.5:1 ratio may fail APCA, and some that fail 4.5:1 may pass.
The goal of APCA is to better reflect real-world reading conditions across a wider range of users.

Who decided that a 4.5:1 or 3:1 ratio was needed?

The numbers aren’t plucked from thin air, and the reasoning behind them is actually quite neat. The 3:1 baseline comes from older display standards: the minimum sensible contrast for someone with typical vision. The 4.5:1 figure builds on that. People with moderately reduced vision (around 20/40) lose roughly a third of their contrast sensitivity, so the baseline was bumped up by half again to make up the difference. 3 times 1.5 is 4.5. The same reasoning gives the stricter AAA level its 7:1, aimed at weaker vision still.

And bear in mind that these colour contrast guidelines don’t just affect those with poor eyesight. I’m certain we’ve all struggled to read text in bright sunlight or on badly designed websites. Studies consistently show that everyone benefits from a minimum of a 4.5:1 colour contrast ratio when reading standard-sized text.

Why these numbers matter in practice

Understanding the science behind contrast ratios, relative luminance, and colour vision deficiencies might seem academic, but it all comes together in practical application. When we combine our knowledge of how:

Different cone cells interpret colours (as we saw in the colour blindness demonstration)
Relative luminance affects perceived brightness (like why blue appears darker than green)
Contrast ratios ensure readability (the 4.5:1 standard)

We can make better design decisions that work for everyone. For instance, that bright yellow text that passes contrast requirements on a white background? It might be technically compliant at 4.5:1, but for someone with tritanopia, it could be nearly invisible. Or that subtle grey text that looks “sleek” on your monitor might become completely unreadable on a phone in sunlight.

This is why WCAG guidelines aren’t just arbitrary numbers - they’re carefully calculated standards that take into account the full spectrum of human vision, from typical colour vision to various types of CVD, from perfect lighting conditions to real-world scenarios. When we follow these guidelines, we’re not just ticking boxes for accessibility compliance - we’re creating interfaces that work better for everyone, in every situation.

Tools for checking colour contrast

Getting colour contrast right takes a little care, but it pays off. Low-contrast text was found on a remarkable 83.9% of the top one million home pages (WebAIM Million, 2026), making it the most common accessibility problem on the web. Happily, it’s also one of the easiest to put right.

My go-to tool is the fantastically designed colourcontrast.cc. There are loads of tools which do this, but I love the design of this one and there’s zero room for ambiguity. If you’d rather not leave the browser, Chrome and Edge DevTools show the contrast ratio right in the colour picker, with a pass/fail against AA and AAA and a “suggested colour” fix.

The short version

When you’re checking your own designs:

Aim for 4.5:1 on body text and 3:1 on large text.
Don’t forget the other states: hover, focus, and placeholder text (placeholder still needs 4.5:1).
Remember contrast isn’t only about text: UI borders, icons and focus rings need 3:1 too (SC 1.4.11).
Never rely on colour alone to convey meaning (SC 1.4.1).
Run anything questionable through a contrast tool before you ship, and try a CVD simulator for colour-coded interfaces.

Get the contrast right and you’re not just ticking a box for compliance: you’re making your content readable for everyone, on every screen, in every lighting condition.