Color Contrast Checker
Check WCAG color contrast for accessibility.
Sign in to use this tool
Create a free account to unlock every tool — plus a 14-day free trial of HQ Pro, no card required.
About the Color Contrast Checker
Check color contrast free against WCAG accessibility standards. Pick your text and background colors and instantly see the contrast ratio with clear pass/fail indicators for AA (4.5:1 normal text, 3:1 large) and AAA (7:1 and 4.5:1). Low-contrast text is one of the most common accessibility failures on the web — and increasingly a legal requirement — so check before you ship.
How to use the Color Contrast Checker
- 01Pick a text color and a background color.
- 02Read the contrast ratio.
- 03Check the WCAG AA / AAA pass indicators.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively.
Why does contrast matter?
Sufficient contrast keeps text readable for everyone, including users with low vision — and it's a common accessibility requirement.
What counts as large text for WCAG?
18pt (24px) regular or 14pt (18.7px) bold and up — large text only needs a 3:1 ratio for AA instead of 4.5:1.