Color Contrast Checker — Free Online Tool
Check whether a foreground/background color pair meets WCAG 2.1 accessibility guidelines. Shows the exact contrast ratio and pass/fail status for four criteria: AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), and AAA large text (4.5:1). A live preview shows how text actually looks on the background.
100% client-side. No uploads. Your data never leaves your browser.
How to use Color Contrast Checker
- Enter a foreground (text) color and a background color in any format.
- The contrast ratio appears instantly alongside WCAG AA/AAA pass/fail badges.
- Preview how sample text looks with the combination in the live preview.
- Adjust either color until you achieve your target compliance level.
Frequently Asked Questions
What is WCAG 2.1?
WCAG (Web Content Accessibility Guidelines) 2.1 is the international standard for web accessibility, published by the W3C. AA compliance is the minimum for most legal requirements.
What counts as 'large text' for WCAG?
Large text is 18pt (24px) or larger for normal weight, or 14pt (18.67px) or larger for bold text.
What contrast ratio do I need to pass WCAG AA?
4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
Related tools
Related reading
Browse all free tools · theproductguy.in