"It looks readable to me" is the most common — and least reliable — way designers judge color contrast. WCAG replaces that gut check with an actual formula, and the gap between "looks fine" and "passes" is bigger than most people expect. Here's how the math works and what the thresholds actually mean.
Contrast ratio is a standardized way of measuring how distinguishable two colors are from each other — specifically, how different their brightness (luminance) is, independent of hue. It's expressed as a ratio from 1:1 (identical, zero contrast) up to 21:1 (pure black against pure white, the maximum possible).
The Web Content Accessibility Guidelines (WCAG) define specific minimum ratios that text must meet against its background to be considered accessible — because "looks readable" is subjective and varies enormously by viewer, screen, and lighting, while a calculated ratio is objective and consistent.
Behind every contrast ratio is a two-step calculation. First, each color's relative luminance is computed from its gamma-corrected RGB values, weighted to reflect how sensitive human eyes are to red, green, and blue light (we perceive green as brightest, blue as dimmest, for equal intensity). Then the two luminance values are compared using a standard ratio formula.
Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The +0.05 constant accounts for ambient light reflecting off the screen even in a "true black" area, keeping the formula realistic rather than purely theoretical.
Because this formula only depends on luminance, two very different-looking colors — say, a saturated red and a saturated blue — can have similar luminance and therefore poor contrast against each other, even though they look "totally different" in hue. Brightness, not color difference, is what the formula actually measures.
| Content Type | WCAG AA (Standard) | WCAG AAA (Enhanced) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18pt+/24px+, or 14pt+/18.66px+ bold) | 3:1 | 4.5:1 |
| UI components & graphical objects | 3:1 | Not separately defined |
AA is the widely required baseline referenced by most compliance obligations. AAA is a stricter, enhanced level — not expected for all content, and genuinely difficult to hit while preserving certain brand color palettes. Target AAA specifically for text-heavy content aimed at users with significant visual impairments, not as a blanket rule for every element.
Large text — defined by WCAG as at least 18 point (24px) at regular weight, or at least 14 point (18.66px) at bold weight — gets a more forgiving contrast requirement (3:1 instead of 4.5:1) because bigger, bolder character strokes remain legible at lower contrast levels than small text does. The letterforms themselves carry more visual weight, compensating partially for reduced luminance difference.
This threshold is a genuine trade-off, not a loophole — it reflects real research on legibility, not a way to sidestep accessibility requirements by simply enlarging text. Use it as intended: a heading styled at 24px+ can reasonably use a slightly lower-contrast color pairing than the same color pair used for 14px body copy.
| Text Color | Background | Ratio | AA Normal Text | AA Large Text |
|---|---|---|---|---|
| #767676 (mid-grey) | #FFFFFF (white) | 4.54:1 | Pass | Pass |
| #999999 (light grey) | #FFFFFF (white) | 2.85:1 | Fail | Fail (below 3:1) |
Both greys look reasonably readable side by side on a screen — but only the darker #767676 actually clears the AA normal-text threshold. The lighter #999999 fails outright for both normal and large text, despite looking "fine" in a quick visual check. This is exactly the gap a calculated tool catches that eyeballing doesn't. Try ToolLoom's Color Contrast Checker to test your own color pairs instantly with a live text preview.
WCAG 2.1 introduced a separate requirement (Success Criterion 1.4.11) specifically for non-text elements: graphical objects and UI components like icons, button borders, form field outlines, and focus indicators need a minimum 3:1 contrast ratio against their adjacent background — distinct from the text contrast rules covered above.
Colour vision deficiency affects roughly 1 in 12 men and 1 in 200 women globally — a meaningful share of any general audience. But contrast issues extend well beyond color blindness specifically: age-related vision decline, viewing a screen in bright outdoor sunlight, and lower-quality or poorly calibrated displays all make low-contrast text genuinely harder to read for a much wider group of people than a "just for color-blind users" framing suggests.