Pick two colours for a website and sooner or later someone asks the question that matters most for readability: can people actually read this? Colour contrast accessibility is the part of that question you can measure. It gives every text-and-background pair a single number, a ratio, and that number tells you whether the pair is easy to read, hard to read, or effectively unreadable for many visitors.
This guide explains what that number means, which numbers pass, how it is worked out, and how to check your own colours before you publish. You do not need to do the maths yourself — a checker does it — but knowing how to read the result stops you guessing.
What a contrast ratio actually is
A contrast ratio compares the brightness of two colours. It is written as a number followed by “:1”, and it runs from 1:1 to 21:1. A ratio of 1:1 means the two colours are identical — text invisible against its background. A ratio of 21:1 is the maximum possible, pure black text on pure white, or the reverse.
The brightness in question is not how bright a colour looks to you on your screen. It is a measured quantity called relative luminance: how much light a colour reflects, worked out from its red, green and blue channels after correcting for the way screens encode colour. Green counts most heavily, then red, then blue, because human eyes are most sensitive to green light. That is why two colours can look equally vivid yet score very differently — hue is not brightness.
The formula itself is simple once the luminance of each colour is known:
contrast ratio = (lighter luminance + 0.05) / (darker luminance + 0.05)
The small 0.05 added to each side keeps the maths well-behaved for pure black, whose luminance is zero. You will almost never compute this by hand. What matters is what the result means: the higher the number, the bigger the brightness gap between text and background, and the easier the text is to read. Note the limit, though: a red and a green can pass the ratio test yet still be hard to tell apart for a colour-blind reader, so contrast is necessary but not sufficient on its own.
The numbers to remember: AA and AAA
The Web Content Accessibility Guidelines (WCAG) set the thresholds. AA is the baseline most sites aim for, and the level most accessibility laws and procurement standards point to. AAA is stricter, a goal for content where maximum readability matters most.
| What you are checking | AA (baseline) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| UI components and meaningful graphics | 3:1 | — |
Normal text means body copy, labels and captions. The third row covers things that are not text but still carry meaning: form field borders, icons, focus indicators and chart elements need 3:1 against the colours next to them.
Two details catch people out. First, the thresholds are minimums, not targets to scrape past. A pair at exactly 4.5:1 passes for normal text at AA, but it leaves no margin for different screens, brightness settings or eyesight. Where you can, aim comfortably above the line. Second, ratios are not rounded up. A pair measuring 4.48:1 fails the 4.5:1 requirement, however close it looks. Believe the exact figure, not the rounded one.
What counts as “large text”
WCAG defines large text as text at least 18 points in size — about 24 pixels on a screen — or at least 14 points bold, about 18.66 pixels bold. Anything smaller, including ordinary bold body text, counts as normal text and needs the higher ratio.
This distinction is where many real designs go wrong. A heading set at 28 pixels can legitimately use a colour pair at 3:1 for AA. The same pair used for the paragraph underneath it fails, because paragraph text is normal text. When a checker gives separate verdicts for normal and large text, it is telling you exactly this: the pair may be fine for headlines but unsuitable for paragraphs.
Worked examples: greys and a purple on either side of the line
Greys are where contrast failures hide, because the difference between a grey that passes and one that fails is almost invisible to the eye. The table below was computed with the WCAG formula, so every figure is exact rather than estimated. All pairs use a white background.
| Text colour | Ratio on white | AA normal (4.5:1) | AA large (3:1) | AAA normal (7:1) |
|---|---|---|---|---|
| #333333 (dark grey) | 12.63:1 | Pass | Pass | Pass |
| #595959 (mid-dark grey) | 7.00:1 | Pass | Pass | Pass |
| #7C3AED (vivid purple) | 5.70:1 | Pass | Pass | Fail |
| #767676 (mid grey) | 4.54:1 | Pass | Pass | Fail |
| #777777 (one shade lighter) | 4.48:1 | Fail | Pass | Fail |
| #999999 (light grey) | 2.85:1 | Fail | Fail | Fail |
Three lessons sit in that table. First, #767676 passes AA for normal text and #777777 fails it, yet they differ by a single step in each channel. Second, the vivid purple #7C3AED passes AA normal and AA large but fails AAA normal, which is exactly what a brand colour often does: good enough for the baseline, not for the enhanced level. Third, #999999 fails even for large text, so it should not carry any text you expect people to read. That gap between “almost passes” and “passes” is why you check the exact figure, not your eye.
How to check a colour pair in under a minute
Checking is quick when you test the real colours from your design. Sample the exact hex values from your stylesheet, your design file or the page itself, rather than guessing from memory, and test the pair exactly as it appears: text colour against background colour, in the direction people will read it.
Manage My Tools’ free Contrast Ratio Checker takes a text colour and a background colour and reports the ratio with AA and AAA verdicts for normal and large text. The Color Tools category also holds a colour converter for translating values between HEX, RGB and HSL, and you can browse the all-tools page.
One honest limit, stated on the checker page itself: the tool judges contrast only, not readability in context, so a passing pair can still look wrong if the type is tiny, the line length is long, or the background is busy. For a second opinion, the WebAIM Contrast Checker uses the same WCAG thresholds if you ever want a second opinion on a pair.
Five mistakes that keep failing
Light grey body text. The most common failure. Pale grey looks clean and modern, but readers struggle with it. If your body text is below 4.5:1, darken it. Save pale grey for large headings or decoration.
Faint placeholder text. The hint inside a form field — “Enter your email” before anyone types — is often styled far lighter than body text, yet it has to meet the same normal-text threshold when it carries information. If the hint is essential, darken it or move the instruction into a visible label.
Brand-colour buttons with white text. Bright greens, oranges and yellows frequently fail with white text. The usual fix is to darken the button colour, use dark text on a light button, or reserve the bright colour for large text and borders.
Text over images and gradients. A checker tests two solid colours, but a photo background changes across the image. Text that passes on the darkest part of the photo may fail on the lightest. Add a solid overlay, a scrim, or a background panel so the pair you test is the pair people actually see.
Colour alone carrying meaning. Red error text, green success text and coloured links raise a second question: can someone who cannot distinguish those colours still tell what is happening? Pair colour with text, an icon or an underline so meaning does not depend on hue alone.
How to fix a failing pair
Start with the text colour. Darkening it by a shade or two is usually enough — remember that #777777 fails AA normal and #767676 passes it, so a small change can cross the line. If darkening the text breaks the design, lighten the background instead: a white or near-white background gives most colours the best chance of passing.
If neither move is acceptable, ask whether the text genuinely qualifies as large. A pairing at 3:1 or above can stay if the text is at least 18 points, or 14 points bold, but do not stretch that definition to ordinary body copy.
Finally, re-check after every change, and re-check the pair in both directions if you use it both ways: dark text on light and light text on dark are different pairs with different ratios. A colour that passes on white does not automatically pass on black, and vice versa.
Frequently asked questions
Is 4.5:1 enough for normal text?
For WCAG AA, yes — 4.5:1 is the minimum for normal text, and the level most standards point to. But a higher ratio is safer in practice: it leaves margin for different screens, brightness settings and eyesight, and it reads more comfortably for longer passages.
Does passing a contrast check mean my site is accessible?
No. Contrast is one requirement among many. A page can pass every contrast check and still fail on keyboard navigation, alt text, heading structure or focus visibility. Treat contrast as a necessary baseline, not a complete accessibility audit.
Do I need to meet AAA?
For most sites, no. AAA is an enhanced level, and the W3C itself does not expect whole sites to meet it. Aim for AA everywhere, and use AAA where it matters most, such as body text on a site whose readers are likely to have low vision.
Does dark mode fix contrast problems?
Not automatically. White text on a dark background needs exactly the same attention as dark text on white. Some pairs even flip: a mid-grey that fails on white may pass on black, while a vivid colour that passes on white may fail on black. Check both themes separately.
Try it with your own colours
Contrast ratios reward a simple habit: check before you publish, not after someone complains. Take the colours from your own design, paste them into Manage My Tools’ Contrast Ratio Checker. If a pair fails, darken the text, adjust the background, or reserve that colour for large text, then check again. The habit takes under a minute and it is the difference between a page that looks good and a page that reads well.
If you are still getting to grips with colour values themselves, the companion article RGB vs HEX vs HSL: Colour Codes Explained (and Where CMYK Fits) explains how the three code formats relate, so the hex values you paste into the checker mean something, not just a string of characters.