Color Contrast Checker (WCAG)
Check text/background contrast against WCAG AA and AAA standards.
✓ WCAG 2.1 thresholds · updated June 2026
| Normal text — AA (≥4.5:1) | ✓ Pass |
| Normal text — AAA (≥7:1) | ✓ Pass |
| Large text — AA (≥3:1) | ✓ Pass |
| Large text — AAA (≥4.5:1) | ✓ Pass |
Ratios follow WCAG 2.1: normal text needs 4.5:1 (AA) or 7:1 (AAA); large text (18pt+/14pt bold) needs 3:1 (AA) or 4.5:1 (AAA). Calculated in your browser.
Enter a text color and a background color to get the exact WCAG contrast ratio, with instant pass/fail badges for AA and AAA at both normal and large text sizes. A live preview shows the real pairing. Essential for accessible, readable interfaces and for meeting accessibility requirements. Calculated in your browser using the official relative-luminance formula.
How to use the Color Contrast Checker
- Set the text color and background color.
- Read the contrast ratio and the AA/AAA pass-fail badges.
- Adjust the colors until they pass for your text size.
Frequently asked questions
What contrast ratio do I need?
WCAG 2.1 requires 4.5:1 for normal text (AA) or 7:1 (AAA). Large text — 18pt and up, or 14pt bold — needs 3:1 (AA) or 4.5:1 (AAA).
How is the ratio calculated?
From the relative luminance of each color: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. This is the exact formula in the WCAG specification.
Does it cover non-text elements?
The AA/AAA badges target text. For UI components and graphics, WCAG asks for at least 3:1 — use the 'Large text — AA' row as that benchmark.