WCAG 2.2 AA · AAA · Normal text · Large text · UI components · APCA preview — 100% local
Enter a text color and a background color to instantly check their contrast ratio against WCAG 2.2. Get pass/fail badges for every accessibility level — AA and AAA, normal and large text, plus UI components. No data is ever sent to a server.
Normal text — The quick brown fox jumps over the lazy dog. (16px)
Large heading — Accessibility matters. (24px bold)
WCAG 2.2 Success Criteria 1.4.3 (AA) and 1.4.6 (AAA) define minimum contrast ratios. Meeting at least AA is a legal requirement in many jurisdictions under accessibility laws like ADA, EN 301 549, and RGAA.
| Criterion | Level | Min. ratio | Applies to |
|---|---|---|---|
| 1.4.3 | AA | 4.5 : 1 | Normal text (below 18pt / 14pt bold) |
| 1.4.3 | AA | 3 : 1 | Large text (≥ 18pt or ≥ 14pt bold) |
| 1.4.11 | AA | 3 : 1 | UI components, icons, focus indicators |
| 1.4.6 | AAA | 7 : 1 | Normal text |
| 1.4.6 | AAA | 4.5 : 1 | Large text |
A contrast ratio is calculated from the relative luminance of two colors. The formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance. A ratio of 1:1 means identical colors; 21:1 is black on white.
AA (the standard requirement) needs 4.5:1 for normal text and 3:1 for large text. AAA (enhanced) needs 7:1 and 4.5:1. AA is the minimum for legal compliance in most countries; AAA is ideal for maximum accessibility.
WCAG defines large text as at least 18pt (24px) regular weight, or 14pt (approximately 18.67px) bold. CSS: font-size: 1.5rem or font-size: 1.17rem; font-weight: bold.
APCA (Advanced Perceptual Contrast Algorithm) is the algorithm proposed for WCAG 3. It measures "lightness contrast" (Lc) and is more accurate for perceptual contrast, especially on dark backgrounds and mid-tone colors. Lc 60 is the target for body text.
No. All calculations run in JavaScript in your browser. No color value or design data is ever transmitted to any server.