WCAG Contrast Checker

Verify if your text and background color combinations pass accessibility guidelines (AA/AAA).

What it does

WCAG Contrast Checker calculates the luminance contrast ratio between any two colors and tells you whether they pass WCAG 2.1 Level AA (4.5:1 for body text, 3:1 for large text) or AAA (7:1 for body text) standards. See WCAG Contrast Ratios Explained for the actual luminance formula behind these numbers and why gradients need checking at both ends, not just the average.

How to use

1. Open WCAG Contrast Checker and enter your text color and background color as HEX (via the color picker or by typing a hex code) — RGB string input isn't supported.
2. View the contrast ratio and a live preview of the two colors together.
3. All five pass/fail checks — Normal Text AA, Normal Text AAA, Large Text AA, Large Text AAA, and UI Components AA — are shown at once, not as a toggle between modes.
4. Adjust colors until the combination passes your required level.

Pass thresholds

| Content type | AA minimum | AAA minimum | | :----------------- | :--------- | :---------- | | Normal text | 4.5 : 1 | 7 : 1 | | Large text (18pt+) | 3 : 1 | 4.5 : 1 | | UI components | 3 : 1 | — |

Common use cases

• Ensure all text on your website is readable by users with low vision.
• Verify that your primary brand colors meet legal accessibility requirements.
• Check every text/background combination in your design system.
• Satisfy ADA and EN 301 549 requirements for public-facing web applications.

FAQ

What is the contrast ratio?

It is the luminance difference between foreground and background colors, expressed as a ratio (e.g., 4.5:1). Higher values mean better readability.

Which WCAG version does it follow?

The checker follows WCAG 2.1 (and applies equally to WCAG 2.2, which does not change contrast requirements).

Does it work with semi-transparent colors?

The tool calculates ratios for solid colors. For transparent overlays, provide the final composite color value.

Privacy

All calculations run instantly in your browser. No color data is transmitted to external servers.