# WCAG Colour Contrast: What does the 4.5:1 ratio actually mean? ## Summary WCAG's 4.5:1 colour contrast ratio is based on how the human eye perceives brightness, known as relative luminance. The ratio defines minimum contrast levels needed for readable text across different vision types and viewing conditions. - The 4.5:1 ratio compares the brightness of foreground and background colours, not their hue. - Relative luminance determines how bright a colour appears to the human eye. - Different types of colour vision affect how contrast is perceived. - The 4.5:1 and 3:1 thresholds come from early readability research. - Good colour contrast improves legibility for everyone, not just people with vision impairments. Anyone who has worked with web accessibility will likely be familiar with the [WCAG Colour Contrast Requirements](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). 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? This article explains where the contrast ratio comes from, how it's calculated, and why it improves readability in real-world conditions. > Larger text (>18pt) or bolder text (>14pt), requires a slightly lower ratio of 3:1. This is because of its inherent ease of readability. The technical term for this is "relative luminance" - how bright each colour appears to the human eye. ## 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](https://www.pexels.com/photo/colour-text-1279813), that shows how people with different types of colour vision perceive the same colour spectrum. 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. > APCA (Advanced Perceptual Contrast Algorithm) is a newer contrast model introduced as part of the working draft for WCAG 3. Unlike the 4.5:1 contrast ratio used in WCAG 2.x, APCA is based on perceptual research into how people actually read text, rather than a simple comparison of brightness values. ## 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](https://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.