Check the WCAG contrast ratio between two colors, with pass/fail for AA and AAA at both text sizes.
Large text sample
Normal-size text sample, the kind used for body copy and paragraphs.
| Standard | Text size | Required | Result |
|---|---|---|---|
| WCAG AA | Normal | 4.5:1 | Pass |
| WCAG AA | Large (18.66px bold / 24px) | 3:1 | Pass |
| WCAG AAA | Normal | 7:1 | Pass |
| WCAG AAA | Large (18.66px bold / 24px) | 4.5:1 | Pass |
Pick or type a foreground (text) and background color as a hex code. The contrast ratio and WCAG AA/AAA pass/fail for normal and large text update live, with a preview showing how real text would actually look.
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18.66px bold or 24px regular and up). AAA is stricter: 7:1 and 4.5:1.
From each color's relative luminance using the WCAG formula, then (lighter + 0.05) divided by (darker + 0.05) - the same math most design tools and browser dev tools use.
No - just the WCAG contrast ratio and pass/fail. It doesn't simulate color blindness or check anything else about the colors.
6 visits