Understanding WCAG Color Contrast (With Examples)

Low contrast is the most common accessibility failure on the web, and it is the easiest to fix once you know the numbers. This is what the WCAG contrast rules actually require and how to meet them.

Check any pair of colors instantly with the Color Contrast Checker.

The thresholds

WCAG (Web Content Accessibility Guidelines) defines contrast as a ratio between 1:1 and 21:1 — the relative luminance of the lighter color divided by that of the darker one, with a small gamma adjustment.

Level	Normal text (< 18pt / < 14pt bold)	Large text (≥ 18pt / ≥ 14pt bold)
AA (the practical target)	4.5 : 1	3 : 1
AAA (stricter)	7 : 1	4.5 : 1

"Large text" gets a break because bigger letters are easier to distinguish. Non-text UI components (form-field borders, icons that convey meaning) only need 3:1 against adjacent colors.

Why these numbers

About 1 in 12 men and 1 in 200 women have some form of color-vision deficiency, and everyone loses contrast sensitivity with age or in bright glare. The 4.5:1 figure was chosen to make text readable for people with 20/40 vision — roughly the acuity of someone with mild vision loss.

Common failures

• Gray-on-white body text. A fashionable #999 on white is about 2.85:1 — fails AA. Push to #767676 (~4.5:1) to pass.
• Brand color on brand color. A teal button with white text can look fine to the designer and still miss 4.5:1. Always measure, never eyeball.
• Placeholder text. Browsers render ::placeholder faded by default; many frameworks ship it below 3:1.
• Links distinguished by color alone. If a link is only a different hue and the contrast against body text is under 3:1, add an underline or a stronger difference.

How to fix a failing pair

1. Darken the text first — that usually buys the most ratio per visual change.
2. If the brand color must stay, swap the background to a darker or lighter variant.
3. For large headlines that fail at 3:1, increasing size or weight often moves them into the "large text" band where 3:1 passes.
4. Convert between HEX, RGB, and HSL to find a close variant that clears the bar — the Color Converter handles all three.

Don't rely on hue alone

Contrast is about luminance, not color. A red button with green text can be a perfectly high-ratio combination that is still unreadable to red-green color-blind users, because both colors have similar luminance. Always check the ratio, and never signal meaning with color alone (pair it with a label, icon, or underline).

Put it in your workflow

The fastest habit: paste your two colors into the Color Contrast Checker before shipping any new text or UI color. It reports the ratio and the AA/AAA pass/fail for both normal and large text, so "is this accessible?" becomes a one-second question instead of a guess.