Color Contrast Checker
Check the contrast ratio between text and background colors against WCAG AA and AAA accessibility standards, with a live preview.
| Standard | Normal text | Large text |
|---|---|---|
| WCAG AA | — | — |
| WCAG AAA | — | — |
| WCAG 1.4.11 | Non-text / UI components (≥3:1): — | |
This report follows WCAG 2.2 contrast-ratio requirements. APCA remains experimental and is not a WCAG 3 conformance result.
Pick colors? Color converter · social bios: Fancy text generator · scales: Shades generator.
How to use
Pick a text color and a background color. The contrast ratio and pass/fail for each WCAG level update live, with a preview.
FAQ
What is a good contrast ratio?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. WCAG 1.4.11 also requires 3:1 for essential non-text graphics and UI component boundaries or states.
What counts as large text?
Large text is about 18pt (24px) or 14pt (18.66px) bold and larger.
How is the ratio calculated?
From the relative luminance of both colors: (lighter + 0.05) ÷ (darker + 0.05), per the WCAG formula.
Last updated: