A contrast ratio is a single number describing how far apart two colours are in relative luminance — roughly, how much light each one sends to your eye. It runs from 1:1 (identical) to 21:1 (pure black on pure white). It is the measure the Web Content Accessibility Guidelines use to decide whether text is legible, and it is the closest thing the field has to an objective answer.
Crucially, it is not about how different two colours look. Two colours can be obviously distinct to someone with typical colour vision and still have a contrast ratio near 1:1 — which is exactly why a red-on-green combination that seems perfectly clear on your monitor can be unreadable for a substantial number of people.
The thresholds
WCAG 2.1 sets these minimums:
| Level | Text size | Minimum ratio |
|---|---|---|
| AA | Normal text | 4.5:1 |
| AA | Large text | 3:1 |
| AAA | Normal text | 7:1 |
| AAA | Large text | 4.5:1 |
| AA | UI components, graphics | 3:1 |
“Large” means at least 18pt (24px), or 14pt (18.66px) if bold. AA is the level most legal accessibility requirements point at; AAA is a higher bar that is often achievable for body text and rarely for brand colours.
The 3:1 requirement for non-text elements is the one most often missed. Input borders, focus rings, icons that carry meaning, and the boundaries of interactive controls all need to clear it against their background — a pale grey border on white is a very common failure.
How the number is calculated
Each channel is converted from its 0–255 value to a linear value (undoing the gamma encoding built into sRGB), then combined with weights of 0.2126 red, 0.7152 green and 0.0722 blue. The green weight dominates because human vision is most sensitive to green. That gives relative luminance L for each colour, and the ratio is (L₁ + 0.05) ÷ (L₂ + 0.05) with the lighter colour on top.
The 0.05 offset models ambient screen glare, and it is why the maximum is 21:1 rather than infinite.
Where people go wrong
Testing the wrong pair. The comparison must be against what is actually behind the text — which for text over an image, a gradient or a semi-transparent overlay is the composited result, not the colour you specified. Flatten the alpha first; a ratio measured against a theoretical background is meaningless.
Assuming a dark colour passes. Mid-tone pairs are the usual trap. #767676 on white
passes AA at 4.54:1; #777777 fails at 4.48:1. One hex digit decides it, and no amount of
squinting will tell you which side of the line you are on.
Only checking the default state. Hover, focus, disabled, visited and error states all need to pass. Disabled controls are formally exempt, but a disabled state nobody can read is still a bad one.
Treating a pass as full compliance. Contrast is one success criterion among many. Font weight, size, letter-spacing, line length and rendering all affect real legibility, and thin weights at small sizes can be hard work at 5:1. A passing ratio is a floor, not a certification — see our terms.
Forgetting dark mode. A pair that passes on a light background frequently fails when inverted. Both themes need checking independently.
Fixing a failure
Adjust lightness rather than hue. Dropping the L in OKLCH darkens a colour without shifting its character, and a few points is usually enough to cross a threshold. If a brand colour cannot be made to pass as text, use it for large headings, backgrounds or accents, and pick a darker relative from its shade scale for body copy.
Our guide on what contrast ratio actually means goes deeper, and the colour blindness simulator covers the distinctness question that contrast alone cannot answer.