WCAG contrast explained simply — no jargon, just what you need to know

1. What the ratio actually measures

The contrast ratio compares the relative luminance of two colors — how much light they reflect. A ratio of 1:1 means identical colors. 21:1 is black on white.

• 4.5:1 is WCAG AA — required for normal body text.
• 3:1 is WCAG AA for large text (18px bold or 24px regular).
• 7:1 is WCAG AAA — the gold standard for maximum readability.
• These aren't arbitrary numbers — they're based on research into low-vision reading.

2. The surfaces people forget to check

Most designers check text on white. But text appears on cards, tinted sections, image overlays, and colored buttons too.

• Check body text on your card surface color, not just the page background.
• Check button label text against the button background color.
• Check placeholder text in form inputs — it's almost always too light.
• Check text on any gradient or image overlay you use.

3. Quick fixes when you fail the check

If a color pair fails, you usually have two options: darken the text or lighten the background. Here's how to do it without breaking the design.

• For muted text, try #64748B on white — it passes AA at 4.6:1.
• For colored text on white, deepen the hue rather than darkening to gray.
• For text on colored backgrounds, switch to white or near-white text if the background is dark enough.

Common mistakes

• Only checking contrast on a white background.
• Using light gray placeholder text that fails at 2:1.
• Assuming 'it looks fine' is the same as passing the ratio.

Before you ship

• Check body text on every surface color in your palette.
• Check button labels, form placeholders, and badge text.
• Aim for 4.5:1 minimum, 7:1 where possible.
• Use the Text Checker tool before every handoff.