WCAG Contrast Checker
Foreground / background colors → contrast ratio + WCAG AA / AAA rating. Sample text preview at multiple sizes.
11pt sample (graphic text)
14pt regular sample
14pt bold sample (counts as "large")
18pt regular sample (counts as "large")
24pt bold heading
Contrast ratio
16.32:1
| Pass | AAA normal text | ≥7:1 — highest standard, body text 14pt+ regular |
| Pass | AAA large text | ≥4.5:1 — large text (18pt+ regular or 14pt+ bold) |
| Pass | AA normal text | ≥4.5:1 — minimum for body text |
| Pass | AA large text | ≥3:1 — large text only |
| Pass | UI components | ≥3:1 — non-text UI elements (buttons, form borders) |
Tips to improve contrast
- For body text aim for 4.5:1 (AA) or higher. AAA (7:1) is gold-standard for max accessibility.
- Darker foreground or lighter background usually fixes failures faster than the opposite.
- UI components like icons, button borders, and focus rings only need 3:1 against their background.
- Large bold text (14pt+ bold or 18pt+ regular) can use 3:1 (AA) / 4.5:1 (AAA).