WCAG Contrast Ratios: AA and AAA Explained

Contrast ratio measures how much two colors differ in perceived brightness, from 1:1 (identical, effectively invisible) up to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) turn that number into a simple pass/fail system, which is why a contrast checker is one of the most-used tools in an accessible design workflow.

The WCAG targets at a glance

• AA — normal text: at least 4.5:1
• AA — large text (18pt+ or 14pt bold+): at least 3:1
• AAA — normal text: at least 7:1
• AAA — large text: at least 4.5:1
• UI components and graphical objects: at least 3:1 (AA)

White text on white is 1:1 and fails. Black on white is 21:1 and passes everything. Most real-world color pairs — light gray on white, pastel text on vivid backgrounds — sit somewhere in the middle, which is why you should measure rather than guess.

How the ratio is calculated

WCAG 2.x uses relative luminance, a weighted measure of how bright a color appears to the human eye (it is not a simple average of the RGB channels). The formula converts each RGB channel to a linear value, weights them, and then divides the lighter color's luminance by the darker one's:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the lighter color's relative luminance and L2 is the darker color's.

Common accessibility mistakes

• Relying on color alone: contrast ratios do not help users who cannot perceive the difference between two hues. Always pair color with icons, labels or patterns.
• Testing only the background: for text, the contrast that matters is text against its actual background — a semi-transparent overlay or image can change the effective background color.
• Using a ratio of exactly 4.4:1 and hoping: WCAG has no rounding-up rule. A 4.4:1 normal-text pair fails AA until you darken or lighten one color slightly.

Check any pair in seconds

The contrast checker on this site computes the WCAG ratio for any two colors instantly and shows exactly which AA/AAA badges they pass, for both normal and large text. Type a hex code, adjust the sliders, and copy the winning combination straight into your CSS.

You can even start from a specific color: every page in the color library (like Navy or Ivory) includes its contrast against white and black text, plus a shortcut into the full checker.

A handy starting point: dark text on a light background almost always clears AA — the failures cluster around mid-tone backgrounds and light-on-light pairings. When in doubt, measure with the checker.

Accessible contrast is a small design decision with a large audience impact. Picking a palette that passes AA for normal text costs nothing and makes your product usable by everyone — including users in bright sunlight and on low-quality displays.