WCAG Color Contrast Explained

A contrast ratio compares the relative luminance — the perceived brightness — of two colors. It is not about hue. Red and green can look wildly different and still have almost identical brightness, which is exactly why they can fail contrast while looking 'colorful' to someone with full vision.

Ratios run from 1:1 to 21:1. A color against itself is 1:1 (invisible). Pure black text on pure white is the maximum, 21:1. Everything readable lives somewhere in between. The formula uses relative luminance, calculated from the red, green, and blue channels with green weighted most heavily, because the human eye is most sensitive to green light.

WCAG defines two conformance levels. Level AA is the practical, widely-adopted target and the one most laws and policies reference. Level AAA is a stricter, enhanced bar that is often impractical to hit across an entire site.

For AA: normal body text needs a ratio of at least 4.5:1, while large text needs only 3:1. Non-text elements that convey meaning — UI components, icons, focus indicators, chart segments, and graphical objects — also need at least 3:1 against their neighbors.

For AAA: normal text rises to 7:1 and large text rises to 4.5:1. 'Large text' has a precise definition: at least 18pt (about 24px), or 14pt (about 18.66px) when bold. Larger, heavier glyphs are easier to read, so WCAG relaxes the requirement for them.

The obvious reason is legibility. Low-contrast text is fatiguing for everyone and genuinely unreadable for many — people with low vision, color vision deficiency, or aging eyes, and anyone using a dim screen in bright sunlight. Good contrast is one of the highest-leverage accessibility wins available.

There is also a legal dimension. WCAG AA is the de facto standard referenced by accessibility laws and regulations in many jurisdictions, including public-sector and commercial procurement requirements. Failing contrast is one of the most common — and most easily detected — accessibility violations, which makes it a frequent target in audits and complaints.

The single most effective fix is to adjust lightness, not hue. Because the ratio is driven by luminance, nudging a color toward black or white moves the number far more than swapping it for a different but equally-bright hue. If light text fails on a light background, darken the background or lighten the text until the ratio clears the threshold.

Work in a perceptual color space like HSL, HSLuv, or OKLCH so you can change lightness while keeping the hue and a recognizable amount of saturation. Resist the urge to simply pick a 'nicer' shade of the same brightness — it will not help. Re-measure after every change, and remember that hover, focus, disabled, and placeholder states each need to pass on their own.