WCAG Color Contrast Checker
Test text vs. background contrast for accessibility.
Large text preview
The quick brown fox jumps over the lazy dog — normal body text at 14px.
14.68:1
Contrast ratio
✓ Pass
AA — normal text
✓ Pass
AA — large text
✓ Pass
AAA — normal text
✓ Pass
AAA — large text
How to use the WCAG Color Contrast Checker
- 1 Pick your text (foreground) color and background color.
- 2 Read the contrast ratio and the live preview.
- 3 Check the AA and AAA pass/fail badges for normal and large text.
Examples
- ▸ Confirming body text meets the 4.5:1 minimum for WCAG AA.
- ▸ Checking whether a button label is readable on a brand-color background.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA is stricter: 7:1 for normal text and 4.5:1 for large text.
What counts as “large text”?
Large text is roughly 18pt (24px) and up, or 14pt (about 18.66px) and up when bold. Larger glyphs are legible at lower contrast, so the thresholds are relaxed.
How is the ratio calculated?
It uses the WCAG relative luminance formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the lighter and darker colors’ luminance. Ratios range from 1:1 to 21:1.