WCAG Contrast Checker

How color contrast works

WCAG measures contrast as a ratio between the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). Luminance is weighted toward green because the human eye is most sensitive to it, which is why a saturated blue can look bold yet still fail against black.

The thresholds you need to know

• AA normal text: 4.5:1. This is the legal baseline in most accessibility laws.
• AA large text: 3:1. Large means 24px regular or 18.66px bold and above.
• AAA normal text: 7:1, and AAA large text: 4.5:1.
• UI components and graphics: 3:1 for borders, icons and focus rings that carry meaning.

Fixing a failing pair without wrecking your brand

You rarely need a new brand color. Keep the hue and saturation and only shift the lightness. That is exactly what the suggestion above does: it walks the lightness of your text color until it clears 4.5:1, so the result still feels like your palette.

/* before */ color: #8a9bb5;  /* 3.9:1 fails AA */
/* after  */ color: #9aa0c0;  /* 5.6:1 passes AA */

Where contrast problems hide

Body text is rarely the culprit. Designers check the main paragraph color and move on. The failures show up in the places that get less attention:

• Placeholder text in form fields, which is often a pale gray around 2.5:1. Users with low vision can't tell an empty field from a filled one.
• Text over images, where contrast changes across the photo. Add a dark overlay or a solid panel behind the text and test against the lightest part of the image.
• Disabled-looking buttons that aren't actually disabled, and secondary links styled in a light brand tint.
• Focus rings, which need 3:1 against the background so keyboard users can see where they are.
• Dark mode. A palette that passes in light mode can fail when inverted, especially saturated blues and reds on near-black.

Contrast is a legal issue, not just a design one

WCAG 2.1 and 2.2 AA are the benchmarks referenced by the ADA in US court cases, by Section 508 for government sites, and by the European Accessibility Act, which applies to many businesses selling into the EU from mid-2025. Low contrast is one of the most common automated findings in accessibility audits, and one of the cheapest to fix. Checking your palette once, at the design stage, saves rework later.

Build contrast into your design tokens

Rather than checking pairs one at a time, decide which text colors are allowed on which backgrounds and encode that in your CSS variables. Generate a full scale with our Tailwind shade generator, which shows contrast against white and black for every step, then pick text colors from the steps that pass:

:root {
  --surface: #ffffff;
  --text: #1f2937;        /* 14.7:1 on surface */
  --text-muted: #4b5563;  /* 7.6:1, safe for small text */
  --link: #1d4ed8;        /* 6.7:1 */
}

Converting colors between formats? Our color converter handles HEX, RGB, HSL and OKLCH. OKLCH is especially useful here because its lightness channel tracks perceived brightness, so nudging L is a predictable way to fix a failing pair.

Frequently asked questions