WCAG 2.1 · Contrast
Color Contrast Checker
Put in a text colour and a background colour. You get the exact ratio, whether it passes AA and AAA for body text, large text and interface components, and a preview of what the pair actually looks like. Nothing is uploaded — the maths runs in your browser.
Large text looks like this
Body text looks like this. The paragraph is here so you can judge the pair at a real reading size, because a ratio that passes on paper can still be tiring to read for a long stretch.
Interface elementWhat the numbers mean
- 4.5:1 — body text at Level AA. This is the number most accessibility laws and procurement contracts point at.
- 3:1 — large text at AA, and the minimum for interface components, focus indicators and meaningful graphics.
- 7:1 — body text at Level AAA, worth aiming for on long-form reading.
- Large text means at least 18.66px bold or 24px regular. It is a size threshold, not a heading rule.
Questions people actually ask
What contrast ratio do I actually need?
4.5:1 for body text and 3:1 for large text is WCAG 2.1 Level AA, which is the level most laws and contracts reference. AAA asks for 7:1 and 4.5:1. Interface components and meaningful graphics need 3:1 against what sits next to them.
What counts as large text?
At least 18.66px if bold, or 24px otherwise. It is a size threshold, not a heading rule — a large heading in a light weight can still fall under the body-text requirement.
Does passing the ratio mean the text is readable?
No. The WCAG 2.1 formula ignores font weight, size beyond the large-text threshold, and the way light text on dark backgrounds appears to spread. A pass is a floor, not a verdict — check the preview as well as the number.
Do disabled controls and logos have to pass?
No. WCAG 2.1 exempts inactive controls, pure decoration, text that is part of a logo, and text in a picture of something else. Everything a person has to read or operate is in scope.