How to Check Color Contrast for WCAG AA and AAA Accessibility

Low-contrast text looks elegant in a mockup and fails real users in daylight, on cheap screens, or with any degree of low vision. Accessibility guidelines put a hard number on it: the contrast ratio between text and its background. Knowing that number — and the thresholds it must clear — is the difference between a design that passes an audit and one that gets flagged.

What the contrast ratio measures

WCAG defines contrast as a ratio between the relative luminance of two colors, ranging from 1:1 (identical) to 21:1 (pure black on pure white). Luminance is not simple brightness — the human eye is far more sensitive to green than to blue, so the channels are weighted. The formula linearizes each sRGB channel and combines them:

function relativeLuminance({ r, g, b }) {
  const a = [r, g, b].map((v) => {
    v /= 255;
    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
}

function contrastRatio(fg, bg) {
  const l1 = relativeLuminance(fg);
  const l2 = relativeLuminance(bg);
  const light = Math.max(l1, l2);
  const dark = Math.min(l1, l2);
  return (light + 0.05) / (dark + 0.05);
}

The Color Contrast Checker runs exactly this math on your two colors and shows the ratio live as you change them.

The thresholds you need to hit

WCAG 2.1 sets different bars for normal and large text:

• AA, normal text: at least 4.5:1.
• AA, large text: at least 3:1.
• AAA, normal text: at least 7:1.
• AAA, large text: at least 4.5:1.

"Large" has a precise meaning: 18pt (about 24px) or 14pt bold (about 19px bold) and up. Below that, text must clear the stricter normal-text bar.

A practical walkthrough

1. Enter your text color as the foreground and your background color — the tool accepts HEX and includes a native picker for each.
2. Read the ratio and the four pass/fail badges for AA and AAA at both text sizes.
3. If a pair fails, use Swap to test the reverse, or nudge one color darker or lighter until it passes.

For example, mid-gray #767676 on white gives a ratio of about 4.54:1 — it just clears AA for normal text but fails AAA. Darkening it to #595959 pushes it to roughly 7:1 and passes AAA.

Common pitfalls and tips

Opacity changes the effective color. Text at opacity: 0.6 blends with whatever is behind it, so the real contrast is against that blend, not the nominal color. Compute contrast on the final rendered color.

Gradients and images have a range. Text over a gradient or photo must pass at its worst point. Test against the lightest and darkest spots the text crosses.

Non-text elements have rules too. Icons, form borders, focus rings, and chart lines need at least 3:1 against adjacent colors under WCAG's non-text contrast criterion — do not forget UI that carries meaning without words.

Contrast is necessary, not sufficient. Never rely on color alone to convey state; pair it with text, icons, or shape.

If a pair only just scrapes past 4.5:1, give yourself margin. Real screens and ambient light eat into that number.

Wrapping up

Contrast is one accessibility win you can verify in seconds and fix before it ever ships. Check every text-and-background pair against AA at minimum, aim for AAA on body copy, and adjust colors until the badges go green. When you need to darken or lighten a failing color, generate systematic variants with the Color Picker. Everything runs in your browser, so testing your whole palette costs nothing.