Color Contrast Checker
Check WCAG contrast ratio and AA/AAA pass for text on a background.
Large text — 24px boldNormal body text at the size most readers see. Aa Bb Cc 0123456789.
16.72 : 1contrast ratio
AA · normal text≥ 4.5Pass
AA · large text≥ 3Pass
AAA · normal text≥ 7Pass
AAA · large text≥ 4.5Pass
The ratio runs from 1:1 (no contrast) to 21:1 (black on white). WCAG asks for at least 4.5:1 for normal text and 3:1 for large text at the AA level, rising to 7:1 and 4.5:1 for AAA. Large text means roughly 18.66px bold or 24px regular and up.
How to check contrast
Enter your text color and background color as hex codes. The tool computes the WCAG contrast ratio, shows a live preview of the text on its background, and marks each AA and AAA threshold as pass or fail.
Fixing a failing pair
If a pair fails, push the two colors further apart in lightness — darken the text or lighten the background. Watch the ratio climb past 4.5:1 (for body text) in the preview, then lock in the values that pass.
Questions
What contrast ratio do I need to pass?
WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text. The stricter AAA level wants 7:1 for normal and 4.5:1 for large. This checker shows pass or fail against all four thresholds at once.
What counts as large text?
Roughly 24px and up for regular weight, or about 18.66px and up when bold. Large text gets a lower contrast requirement because bigger letterforms stay legible at lower contrast than body copy.