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.

But have you ever wondered what that 4.5:1 ratio actually means, and where it comes from?

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.

A colour contrast ratio of 4.5:1 means that the lighter colour is 4.5 times brighter than the darker colour. This isn't arbitrary - this ratio is based on how our eyes perceive different levels of brightness and has been meticulously determined to ensure text legibility and overall visual accessibility for users with varying vision abilities, including colour blindness.

Different types of colour vision

When discussing colour contrast, it's important to understand that people perceive colours differently. Colour blindness, or Colour Vision Deficiency (CVD), affects approximately 1 in 12 men and 1 in 200 women worldwide. The three most common types are:

• Protanopia: Difficulty distinguishing between red and green colour, with reds appearing darker
• Deuteranopia: Similar to protanopia, but without the darkening effect on reds
• Tritanopia: Difficulty distinguishing between blue and yellow colour

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: Protanopia Deuteranopia Tritanopia

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. 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 calculated using Red, Green, and Blue (RGB) values weighted to match how bright a colour appears to the human eye. Red contributes 30%, Green contributes 59%, while Blue contributes just 11%.

Understanding this concept helps to explain why some colour combinations are easier to read. It also explains why pure blue (0,0,255) appears much darker than pure green (0,255,0) to our eyes, despite both being at maximum value, since blue only contributes 11% to our perceived brightness, while green contributes 59% - that’s a dramatic difference in luminance.

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

This goes back to the early 1990s, when accessibility research - led by groups like the Trace R&D Center - laid the foundation for modern contrast standards. Researchers investigated how different luminance levels affect readability, leading to a framework that established minimum contrast ratios for effective communication. The specific ratios emerged from rigorous studies of reading performance and informed the development of the Web Content Accessibility Guidelines (WCAG)

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

Setting minimum colour contrast isn’t incredibly straightforwards, but with over 86% of the most common accessibility failures being down to colour contrast - let’s see how to fix it.

Colour contrast tools

My go-to tool is the fantastically designed colourcontrast.cc. There’s loads of tools which do this, and you can even just make your own simple JavaScript tool if you wanted - but I love the design of this site, and there’s zero room for ambiguity.