Free Color Contrast Checker
Test color contrast ratios against WCAG 2.1 accessibility standards. Check AA and AAA compliance for text readability. Free, instant, and private.
| Normal Text | Large Text | |
|---|---|---|
| WCAG AA | ✓ Pass Requires 4.5:1 ratio | ✓ Pass Requires 3:1 ratio |
| WCAG AAA | ✓ Pass Requires 7:1 ratio | ✓ Pass Requires 4.5:1 ratio |
| UI Components | ✓ Pass Requires 3:1 ratio (WCAG 2.1) | |
Frequently Asked Questions
What is a color contrast ratio?
A contrast ratio measures the difference in perceived brightness between two colors, expressed as a ratio from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). It is calculated using the WCAG relative luminance formula, which accounts for how human eyes perceive different wavelengths of light.
What contrast ratio do I need for WCAG compliance?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. UI components and graphical objects require at least 3:1 under WCAG 2.1.
What counts as "large text" in WCAG?
Large text is defined as 18 points (24px) or larger at regular weight, or 14 points (approximately 18.66px) or larger at bold weight. Large text has lower contrast requirements because it is inherently easier to read.
Why does color contrast matter for accessibility?
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Low contrast text is difficult or impossible to read for people with low vision, color blindness, or those viewing screens in bright sunlight. Adequate contrast ensures your content is readable by everyone.
Does this tool store my color selections?
No. Everything runs locally in your browser. No colors, results, or data of any kind are sent to a server or stored. Your privacy is fully protected.
How does the color suggestion feature work?
When a color pair fails a WCAG level, the tool automatically calculates the closest color that would pass by adjusting the lightness in HSL color space while preserving the original hue and saturation. It suggests both a darker foreground and lighter background option so you can choose what fits your design.