Colour contrast checker
AA, AAA and the one everyone forgets
Enter any two colours as hex, rgb() or a CSS colour name. Everything is worked out in your browser — nothing is sent anywhere.
e.g. #767676, rgb(118,118,118), dimgray
Use the colour actually behind the text, not the page
- PassAA · normal textNeeds 4.5:1 — Body copy, labels, anything under 18.66px (or under 14px bold)
- PassAA · large textNeeds 3:1 — 18.66px+ regular, or 14px+ bold
- FailAAA · normal textNeeds 7:1 — Enhanced. Rarely a legal requirement
- PassAAA · large textNeeds 4.5:1 — Enhanced, large text
- PassAA · UI & graphicsNeeds 3:1 — Input borders, focus rings, icons, chart segments (1.4.11)
This pair passes AA for normal text. If it is only being used for large headings or a control border, 3:1 was all you needed.
The thresholds, in one table
| What it is | AA | AAA | Criterion |
|---|---|---|---|
| Normal text (under 18.66px, or under 14px bold) | 4.5:1 | 7:1 | 1.4.3 / 1.4.6 |
| Large text (18.66px+, or 14px+ bold) | 3:1 | 4.5:1 | 1.4.3 / 1.4.6 |
| Control boundaries and meaningful graphics | 3:1 | — | 1.4.11 |
| Logos and purely decorative graphics | Exempt | Exempt | 1.4.3 / 1.4.11 |
| Disabled controls | Exempt | Exempt | 1.4.3 |
Four mistakes that cause most contrast failures
Testing against the page instead of the element
The ratio is between the text and whatever is immediately behind it. Text on a card sitting on a page is measured against the card, not the page. Text over an image has no single answer at all, which is why an overlay layer or a solid plate behind the text is the usual fix.
Forgetting placeholder and helper text
Designers reach for a lighter grey to make secondary text recede, and it is almost always the first thing to fail. Placeholder text at #999 on white is 2.85:1 — well under AA — and it is the text people most need to read while filling in a form.
Ignoring 1.4.11 entirely
Input borders, focus rings, toggle switches, chart segments and icon buttons all need 3:1 against their background. A 1px #e5e5e5 border on white is 1.26:1, which means the field is effectively invisible to a lot of people.
Only checking one theme
If you ship a dark mode, every pair has to be checked twice. Colours that pass comfortably on white frequently fail on near-black, because luminance is not symmetrical.
When contrast is not the problem
Contrast is one of 55 Level AA criteria and one of the very few a machine can measure exactly. If you are here because someone raised an accessibility concern, contrast is unlikely to be the whole of it.
- Scan a page for the other machine-detectable failures — alt text, labels, control names, heading structure.
- Do the keyboard pass — ten minutes, and it finds what no scanner can.
- Read WCAG 2.2 AA in plain English — all 55 criteria without the specification language.
Frequently asked questions
What contrast ratio do I actually need?
4.5:1 for normal body text and 3:1 for large text, to meet WCAG 2.2 Level AA — which is the level named in almost every legal and procurement context. Large means 18.66px or bigger at normal weight, or 14px or bigger at bold. Level AAA raises those to 7:1 and 4.5:1 and is rarely a requirement. Separately, 1.4.11 asks for 3:1 on the visual boundary of controls and on meaningful graphics, which is the one most designs miss.
How is the contrast ratio calculated?
From the relative luminance of the two colours, not from how different they look. Each channel is converted from sRGB to linear light, weighted (red 0.2126, green 0.7152, blue 0.0722) and summed, then the ratio is (lighter + 0.05) / (darker + 0.05). Ratios run from 1:1 for identical colours to 21:1 for pure black on pure white. Because green is weighted most heavily, two colours that feel equally bright can score very differently.
Does my logo or icon need to pass?
Logos are explicitly exempt from the text contrast requirement. Icons are not, if they carry meaning — a warning triangle or a chart segment needs 3:1 under 1.4.11. Purely decorative graphics need nothing, but "decorative" means genuinely nothing is lost if it disappears.
Why does this tool refuse semi-transparent colours?
Because a colour at 20% opacity is not a colour until you know what is behind it. Guessing produces confidently wrong answers — an early version of our scanner reported white-on-white because it read a translucent overlay as opaque. Work out the colour that actually ends up on screen and enter that instead.
Does passing contrast mean my site is accessible?
No. Contrast is one criterion out of 55 at Level AA, and it is one of the few a machine can measure precisely. Keyboard operability, focus visibility, form labelling and screen reader behaviour all matter at least as much and mostly cannot be automated. The scan on our accessibility checker covers the other machine-detectable ones.