Tools / 03
WCAG Contrast Checker
Test two colours against WCAG thresholds for text and interface elements.
Use this tool ↓Loading the interactive surface…
How to use it
- 01
Choose foreground and background colours or paste exact hexadecimal values.
- 02
AA requires at least 4.5:1 for normal text and 3:1 for large text and meaningful interface graphics.
- 03
Test real states as well, including hover, focus, disabled controls and text placed over images.
Is contrast alone enough for accessibility?
No. Colour contrast is one requirement among many, including keyboard access, structure, labels, alternatives and predictable behaviour.
What counts as large text?
WCAG defines large text as at least 18pt regular or 14pt bold. CSS pixels and font weight need to be interpreted carefully in the final interface.