WCAG Contrast Explained

WCAG contrast is a single number comparing the relative luminance — the perceived brightness — of your text against its background. It runs from 1:1 (identical, invisible) to 21:1 (pure black on pure white). Higher means more legible, especially for low-vision readers, in glare, or on cheap screens. The ratio is computed from the colors' luminance, not a casual 'looks different enough,' which is why two colors that seem distinct can still fail.

A crucial subtlety: the ratio is about lightness, not hue. Two colors of similar brightness — a medium red on a medium green, say — can be wildly different in color yet have a poor contrast ratio, which is unreadable for many people and invisible to some color-blind users. This is why you check the number rather than trusting your eye, and why pairing colors by brightness difference matters more than by hue.

WCAG defines two levels. AA — the common legal and practical standard — requires 4.5:1 for normal text and 3:1 for large text. AAA is stricter: 7:1 for normal and 4.5:1 for large. Most projects target AA everywhere and reach for AAA where they can, because AAA on small text with brand colors is often impractical.

The 'large text' exception is generous and worth using. Large text is defined as at least 18pt (about 24px) regular, or 14pt (about 18.66px) bold. Because bigger, heavier letters are inherently easier to read, they only need 3:1 at AA. So a color that fails 4.5:1 for body copy may pass comfortably as a bold heading — a legitimate way to use a brand color that's too light for paragraphs. Note that both thresholds apply to text and meaningful UI elements; decorative graphics and disabled controls are exempt.

Most failures are a brand color used as text on white (or white text on a brand color) that's just too light. The fix is to adjust lightness while preserving hue: convert the color to HSL and lower the L value in small steps, re-checking the ratio until it clears 4.5:1. You usually keep the brand's recognizable color while gaining the contrast — a darkened teal still reads as teal. Do the opposite (lighten) for a dark background.

When darkening enough would distort the brand too much, use the large-text rule instead: reserve the light brand color for big, bold headings and buttons where 3:1 is the bar, and use a darker neutral for body copy. Test the specific pairing, not the color in isolation, since contrast is always relational — the same brand color can pass on one background and fail on another. Lock in the values that pass and apply them consistently rather than eyeballing each new combination.