Colour Contrast and WCAG: What the 4.5:1 Rule Really Means

By the UtilityForge Editorial Team · Published October 22, 2026 · 6 min read

Light grey text on a white background looks elegant in a design mockup. On a phone in sunlight, or to someone with low vision, it can be almost invisible. Colour contrast is one of the simplest accessibility wins, and also one of the most commonly missed.

What a contrast ratio is

The Web Content Accessibility Guidelines (WCAG) measure contrast as a ratio between the brightness of two colours, from 1:1 (identical colours, no contrast) up to 21:1 (black on white). The calculation uses something called relative luminance, which weighs the red, green and blue parts of a colour according to how bright the human eye perceives them. Green counts the most, blue the least.

You don't have to do the maths yourself, but it helps to know that it's not an opinion. It's a formula, so two people checking the same pair of colours will get the same answer.

The numbers to remember

AA, normal text: at least 4.5:1
AA, large text: at least 3:1
AAA, normal text: at least 7:1
AAA, large text: at least 4.5:1
UI components and graphics (input borders, icons that carry meaning): at least 3:1

"Large text" means roughly 24 pixels or bigger, or about 18.7 pixels and bold. Level AA is the standard most laws and procurement rules point to, so that's the usual target. AAA is great when you can reach it, but WCAG itself notes it isn't realistic for every piece of content.

Why it matters beyond compliance

Roughly one in twelve men and one in two hundred women have some form of colour-vision deficiency. Many more people have age-related vision changes, or are simply reading on a cheap screen with the brightness turned down. Good contrast helps all of them. It also tends to improve reading speed and reduces eye strain for everyone.

There's a legal angle as well. Accessibility rules such as the ADA in the US, the European Accessibility Act, and similar standards elsewhere increasingly reference WCAG. Even if you're not worried about legal risk, failing contrast is an easy thing for an audit to flag.

Common offenders

Placeholder text in form fields, often pale grey on white.
Text over images without an overlay, where contrast changes from one part of the picture to the next.
Brand colours, especially bright yellows, oranges and light blues used as text on white.
Disabled buttons. These are technically exempt, but if they're too faint, people won't even realise they're there.
Link colours that are only slightly different from surrounding text and have no underline.

Fixing it without wrecking the design

You rarely need to change your whole palette. A few small moves usually do it:

Darken the text, not the background. Going from #999999 to #767676 on white takes you right to the 4.5:1 line.
Keep the brand colour for large elements like headings and buttons, where 3:1 is enough, and use a darker shade for small body text.
Add a solid or semi-transparent layer behind text that sits on a photo.
Don't rely on colour alone. Pair red error text with an icon or a message, so it still makes sense in greyscale.

Tools, and their limits

An automated checker is fast and objective, so use one early. Our WCAG contrast checker shows the ratio and tells you which levels pass, with a live preview of your text. But remember what it can and can't do. It measures a colour pair. It can't tell you whether your font is too thin, whether your layout is usable with a keyboard, or whether your images have alt text. Passing contrast is one piece of accessibility, not the whole thing.

Check your main text, your links, your buttons and your form fields, and you'll catch most of the real-world problems. Then ask someone to look at your site on their phone, outside, at lunchtime. Nothing beats that test.