What contrast ratio do I actually need?

For normal-sized body text, WCAG level AA asks for at least 4.5:1. Large text — 24px and up, or 18.66px (14pt) and up if it is bold — only needs 3:1. The stricter AAA level asks for 7:1 for normal text and 4.5:1 for large text. Most organisations aim for AA; AAA is a stretch goal, not a legal baseline.

Is a higher contrast ratio always better?

For legibility, more contrast is safe up to a point, and 21:1 (pure black on pure white) is the maximum possible. Some people with dyslexia or light sensitivity find pure black on pure white harsh, so a very dark grey on off-white (still well above 7:1) can be more comfortable. You cannot fail an accessibility check by having too much contrast, but you can make text feel a little sharp.

Why is "large text" allowed a lower ratio?

Bigger letterforms have thicker strokes and more area, so the eye can resolve them at a lower contrast than it needs for small text. WCAG reflects that by relaxing the requirement from 4.5:1 to 3:1 once text is large. "Large" means at least 18pt (about 24px) regular, or 14pt (about 18.66px) bold.

Does contrast apply to buttons, icons and borders too?

Yes. WCAG 2.1 added success criterion 1.4.11 (Non-text Contrast), which requires at least 3:1 between a user-interface component or meaningful graphic and its surroundings. That covers the outline of a text field, the icon on a button, focus indicators and chart elements — not just words.

What about text on top of a photo or gradient?

The ratio still applies, but the background is no longer a single colour, so you have to check the worst spot where the text sits. The usual fixes are a solid or semi-opaque overlay behind the text, a text shadow, or a solid plate. Our checker works on two solid colours, so pick the lightest part of the image behind your text and test against that.

Do I need to worry about transparency (alpha)?

Contrast is defined between two solid colours, so a semi-transparent colour has no fixed ratio until you know what is behind it. That is why this tool rejects colours with an alpha channel and asks for the solid colour the text actually sits on. Work out the composited colour first, then test that.

Is passing a contrast check enough to be "accessible"?

No — it is necessary but not sufficient. Contrast is one of dozens of WCAG success criteria. Keyboard operability, meaningful alt text, form labels, heading structure and not relying on colour alone all matter too. Passing contrast means people can see your text; the rest of WCAG is about whether they can use your site.

Which WCAG version does this tool use?

WCAG 2.1, which is the version most laws and policies currently reference. There is a newer draft scoring method called APCA (part of the in-progress WCAG 3) that models contrast differently and may eventually replace the 2.1 ratio, but it is not yet what anyone is legally held to. When that changes, we will add it.

Hue Shall Not Pass

Why contrast matters

Contrast is the difference in lightness between your text and whatever sits behind it. When there is plenty of it, letters snap into focus. When there isn't, they smear together and reading becomes work — and most people won't do that work. They'll skim, misread, or leave.

It's tempting to test your colours the way you'll see them: on a good monitor, at full brightness, with young, rested eyes, indoors. Almost nobody in your audience has all five of those at once. Consider who actually shows up:

People with low vision. Around one in twelve of us has a visual impairment that isn't fully corrected by glasses. Low contrast is one of the first things that stops being readable.
Ageing eyes. The lens yellows and the pupil shrinks with age, so a 60-year-old needs markedly more contrast than a 20-year-old to read the same text. Your audience is older than your design team.
Colour blindness. Roughly one in twelve men and one in two hundred women perceive colour differently. Contrast that depends on hue alone — red text on green — can vanish for them entirely.
Bright sunlight. Anyone reading on a phone outdoors is fighting glare that flattens contrast dramatically. Pale grey that looks fine in your office is invisible on a train platform.
Cheap or old screens. Budget monitors, worn-out laptops and dim phone displays all compress the range between light and dark. Your text has to survive the worst screen, not the best.

Good contrast isn't a favour to a minority. It's the difference between text that works everywhere and text that only works in the exact conditions you happened to design it in.

What WCAG actually says

WCAG — the Web Content Accessibility Guidelines — is the international standard for making web content usable. Its contrast rules boil down to a small set of numbers, and they're worth knowing because they're what regulators, procurement teams and lawyers point at.

The core requirement (level AA, the one almost everyone is held to) is:

4.5:1 for normal text.
3:1 for large text.

"Large" has a precise definition: at least 18pt (about 24px) for regular weight, or 14pt (about 18.66px) if the text is bold. Bold counts as large at a smaller size because the thicker strokes are easier to resolve. We round the bold threshold up to 19px in the tool above so you're never sitting exactly on the line and getting a false pass.

There's also a stricter level, AAA, which asks for 7:1 for normal text and 4.5:1 for large. AAA is a genuinely high bar — WCAG itself says it isn't achievable for all content — so treat it as a goal for body copy where you can hit it, not a universal requirement. The "Strict mode" toggle in the tool switches the whole grid to AAA if you want to aim high.

One more rule people miss: non-text contrast (success criterion 1.4.11). Buttons, form-field outlines, icons that carry meaning, focus rings and chart segments all need 3:1 against their surroundings. A button nobody can find is as broken as a sentence nobody can read.

How the contrast ratio is calculated

You don't need this to use the tool, but it's worth seeing once — partly because it explains some surprising results, and partly because a checker that hides its maths is asking you to trust it blindly.

The ratio isn't based on the hex values directly. It's based on relative luminance — a model of how bright a colour appears to the human eye, which weights green far more heavily than red or blue because our eyes are most sensitive to green. Each colour channel is first converted from its stored sRGB value to a linear-light value, then combined:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

(R, G and B here are the linearised channel values, not the raw 0–255 numbers.) Once you have the luminance of both colours, the contrast ratio is:

(L_lighter + 0.05) ÷ (L_darker + 0.05)

That produces a number between 1:1 (identical colours) and 21:1 (pure black on pure white). The 0.05 is a small allowance for ambient screen glare. Because green dominates the luminance sum, this is why two colours with the same "brightness" to your eye can score very differently — and why adjusting green moves the needle more than adjusting blue.

How to fix a failing colour pair

Here's the practical part. When a pair fails, the instinct is to reach for a different colour entirely. You almost never need to. The single most useful move is:

Change the lightness, not the hue.

Keep the hue and saturation that make the colour yours, and slide it lighter or darker until it clears the ratio. Your brand blue stays recognisably your brand blue; it just becomes a darker version of it for text. That's exactly what the "Fix it for me" button above does — it holds the hue and saturation and walks the lightness to the nearest value that passes.

A few reliable rules of thumb:

Use your brand colour for backgrounds and big shapes, a darker version for text. Vivid mid-tone colours are great as fills and terrible as small text on white. Darken them 20–40% for body copy.
Don't fight physics with a bigger font. Yes, large text only needs 3:1 — but if a colour only passes at 24px, it will still fail everywhere you use it small, which is most places. Fix the colour, then use it freely.
Darken the text before you lighten the background. Readers expect dark text on light surfaces; going the other way often looks off unless you commit to a fully dark theme.
Check both themes. If you ship light and dark modes, a pair that passes in one can fail in the other. Test both.

Common mistakes

These are the failures we see again and again. If you only remember one section, remember this one.

Grey placeholder and helper text on white. The classic. That elegant light grey (#999 and friends) sits around 2.8:1 on white — it fails, and it fails on exactly the microcopy people most need to read: form hints, captions, timestamps.
Brand colour on brand colour. Two colours from the same palette often share a similar lightness, which means almost no contrast between them. A logo can survive that; a paragraph can't.
Text straight over a photo. A background image has no single colour, so contrast swings as the text crosses it. Add an overlay or a solid plate behind the words.
Disabled buttons nobody can read. Disabled states are deliberately faded — but "faded" often lands at 1.5:1, so users can't even read what they're not allowed to do. Keep disabled text legible; signal the state another way.
Relying on colour alone. Red for "error" and green for "success" is invisible to many colour-blind users. Pair colour with an icon or a word.
Testing at your maximum brightness. Your screen at full brightness is not your reader's screen on a bus. Build in headroom above the minimum ratio.

The legal angle

Contrast isn't only good manners — in a lot of places it's a legal requirement, and it's one of the easiest things for a complainant to demonstrate. A quick, high-level tour (this is not legal advice — if you have real exposure, talk to a professional):

United States — the ADA. Courts have repeatedly treated commercial websites as "places of public accommodation," and WCAG AA has become the de-facto benchmark in settlements. Web accessibility lawsuits run into the thousands each year, and low contrast is a frequent, easily-evidenced citation.
Europe — EN 301 549 & the European Accessibility Act. The EN 301 549 standard folds in WCAG AA, and the European Accessibility Act extends accessibility duties to a broad range of private-sector digital products from 2025 onward.
United Kingdom — the Equality Act 2010. Requires "reasonable adjustments" so disabled people aren't put at a substantial disadvantage; inaccessible content, including unreadable text, can fall foul of it. Public-sector bodies have an explicit WCAG AA obligation on top.

You don't have to become an expert in any of this. The point is simpler: meeting WCAG AA contrast is a small, concrete task that takes a chunk of legal risk off the table and — not coincidentally — makes your site better for everyone.

Frequently asked questions

What contrast ratio do I actually need?: For normal-sized body text, WCAG level AA asks for at least 4.5:1. Large text — 24px and up, or 18.66px (14pt) and up if it is bold — only needs 3:1. The stricter AAA level asks for 7:1 for normal text and 4.5:1 for large text. Most organisations aim for AA; AAA is a stretch goal, not a legal baseline.
Is a higher contrast ratio always better?: For legibility, more contrast is safe up to a point, and 21:1 (pure black on pure white) is the maximum possible. Some people with dyslexia or light sensitivity find pure black on pure white harsh, so a very dark grey on off-white (still well above 7:1) can be more comfortable. You cannot fail an accessibility check by having too much contrast, but you can make text feel a little sharp.
Why is "large text" allowed a lower ratio?: Bigger letterforms have thicker strokes and more area, so the eye can resolve them at a lower contrast than it needs for small text. WCAG reflects that by relaxing the requirement from 4.5:1 to 3:1 once text is large. "Large" means at least 18pt (about 24px) regular, or 14pt (about 18.66px) bold.
Does contrast apply to buttons, icons and borders too?: Yes. WCAG 2.1 added success criterion 1.4.11 (Non-text Contrast), which requires at least 3:1 between a user-interface component or meaningful graphic and its surroundings. That covers the outline of a text field, the icon on a button, focus indicators and chart elements — not just words.
What about text on top of a photo or gradient?: The ratio still applies, but the background is no longer a single colour, so you have to check the worst spot where the text sits. The usual fixes are a solid or semi-opaque overlay behind the text, a text shadow, or a solid plate. Our checker works on two solid colours, so pick the lightest part of the image behind your text and test against that.
Do I need to worry about transparency (alpha)?: Contrast is defined between two solid colours, so a semi-transparent colour has no fixed ratio until you know what is behind it. That is why this tool rejects colours with an alpha channel and asks for the solid colour the text actually sits on. Work out the composited colour first, then test that.
Is passing a contrast check enough to be "accessible"?: No — it is necessary but not sufficient. Contrast is one of dozens of WCAG success criteria. Keyboard operability, meaningful alt text, form labels, heading structure and not relying on colour alone all matter too. Passing contrast means people can see your text; the rest of WCAG is about whether they can use your site.
Which WCAG version does this tool use?: WCAG 2.1, which is the version most laws and policies currently reference. There is a newer draft scoring method called APCA (part of the in-progress WCAG 3) that models contrast differently and may eventually replace the 2.1 ratio, but it is not yet what anyone is legally held to. When that changes, we will add it.