Colour contrast terms, in plain words
A colour contrast checker measures how far apart a text colour and its background are in brightness, on a scale from 1:1 (no difference) to 21:1 (black on white): for example, mid grey #767676 on white scores 4.54:1, which just passes WCAG AA for body text, while lighter #999999 scores 2.84:1 and fails.
WCAG is the web accessibility standard most clients, public bodies and procurement teams point to. Its contrast rules come down to a handful of words you will see on audits and in client emails.
- Contrast ratio
- A single number that says how different two colours are in brightness. It runs from 1:1, where text would be invisible, to 21:1 for pure black on pure white. Hue does not count: red on green can score badly even though the colours look very different.
- Relative luminance
- How bright a colour looks to the human eye, from black at the bottom to white at the top. The eye is much more sensitive to green than to blue, so a bright blue counts as darker than a yellow of the same strength.
- AA and AAA
- The two levels of WCAG that cover contrast. AA is the level most contracts, laws and audits ask for: 4.5:1 for normal text and 3:1 for large text. AAA is stricter: 7:1 for normal text and 4.5:1 for large text.
- Large text
- Text at 24 px or more, or bold text at about 18.7 px (14 pt) or more. Large text is easier to read, so it is allowed a lower ratio. A 16 px button label is normal text, even if it is bold.
- UI parts (non-text contrast)
- Things people need to see to use the page that are not text: input borders, checkbox outlines, icons with no label, focus rings and chart lines. WCAG asks for at least 3:1 against what sits next to them.
- Transparent text
- Text set with an alpha value, such as rgb(0 0 0 / 0.6). The checker blends it onto the background first and measures the colour you actually see, which is how WCAG treats it.
Colour contrast pairs, checked
These are made-up colour pairs that come up in real client reviews: grey captions, white text on brand buttons and banners, and pale notes. Each row runs through the same code as the checker above. The ratio is cut, never rounded up, so a pair that sits just under a threshold shows as a fail.
| Example | Text | Background | Ratio | AA normal | AA large | AAA normal | UI parts |
|---|---|---|---|---|---|---|---|
| Example: light grey body text on white | #999999 | #ffffff | 2.84:1 | Fail | Fail | Fail | Fail |
| Example: mid grey caption on white | #767676 | #ffffff | 4.54:1 | Pass | Pass | Fail | Pass |
| Example: white text on a bright blue button | #ffffff | #1a73e8 | 4.5:1 | Pass | Pass | Fail | Pass |
| Example: white text on an orange banner | #ffffff | #ff8800 | 2.39:1 | Fail | Fail | Fail | Fail |
| Example: dark text on a pale yellow note | #333333 | #fff4c2 | 11.41:1 | Pass | Pass | Pass | Pass |
| Example: 60% black text on white | rgb(0 0 0 / 0.6) (shows as #666666) | #ffffff | 5.74:1 | Pass | Pass | Fail | Pass |
| Example: near-black on white | #1d1d1f | #ffffff | 16.82:1 | Pass | Pass | Pass | Pass |
Where a colour contrast check stops
A pass is not the same as easy to read
Contrast is one rule of many. Thin fonts, small sizes, long lines in capitals and busy photos behind text can make a passing pair hard to read. Look at the real page on a phone in daylight before you sign it off.
Text on images and gradients needs the worst spot
The checker compares two flat colours. When text sits on a photo or a gradient, pick the lightest (or darkest) part of the background behind the letters and check that. An overlay or a solid strip behind the text is the usual fix.
Brand colours are a client decision, not a bug
When a brand colour fails, the fix is often a darker shade for text and buttons while the original stays for large shapes and logos. Agree that with the client in writing, so the next round does not quietly undo it.
Logos and disabled controls are exempt
WCAG does not ask for contrast on logo text, purely decorative text, or controls that are switched off. Clients sometimes ask for a disabled button to "look more active": that is a design choice, so note it in the review.
One check is not an accessibility audit
Contrast is the most common failure on most sites, but it is only one criterion. For a fuller review before launch, work through a checklist that also covers keyboard use, forms, images and video.
Questions about colour contrast and WCAG
What contrast ratio does WCAG AA need for text?
At least 4.5:1 for normal text and 3:1 for large text, which is 24 px and up, or bold at about 18.7 px and up. Icons, input borders and focus outlines need at least 3:1 too. AAA asks for 7:1 for normal text and 4.5:1 for large text.
Why does the contrast checker show 4.49:1 and not 4.5:1?
WCAG thresholds are hard limits, so a ratio of 4.497 does not pass a 4.5 rule. The checker cuts the number to two decimals instead of rounding it up, so what you see always agrees with the pass or fail next to it.
Does the colour contrast checker work with RGB, HSL and transparent colours?
Yes. Paste a HEX code, rgb() or hsl() value, or three numbers. A see-through text colour is blended onto the background first, and the checker shows the solid colour that results. The background itself must be solid.
How do I fix a brand colour that fails the contrast check?
Use the suggested fix: it finds the closest darker or lighter version of the text colour that reaches the level you pick. Keep the original for large shapes and logos and use the adjusted one for text and buttons. A tint and shade scale of the brand colour helps you pick a neighbour that passes.
Is white or black text better on my brand colour?
Under every result the checker shows whether black or white text scores higher on your background, with its ratio. Mid-tone colours such as orange, light blue and green often score better with black text than with white, even when white looks more on-brand.
Do I need AAA contrast for a client website?
Usually not. Most laws, public-sector rules and client contracts ask for WCAG AA. AAA for body text is a good aim for long reading pages, but it is rarely required for a whole site. Check what the contract or brief actually names.
How do I share a contrast problem with a client without a long explanation?
Copy the review note under the result. It names both colours, the ratio and which levels pass or fail, in one sentence. Pin it on the exact button or heading in your review tool so the client sees where it applies.