Color Contrast Checker
Check WCAG 2.1 AA/AAA color contrast ratios for accessibility compliance.
Contrast Ratio
WCAG 2.1
Preview
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Color Blindness Simulation
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
About Color Contrast Checker
The WCAG Color Contrast Checker verifies whether the contrast ratio between text and background colors meets Web Content Accessibility Guidelines (WCAG) 2.1 standards. AA compliance requires a ratio of 4.5:1 for normal text, and AAA requires 7:1. This is essential for making web content accessible to users with low vision or color blindness.
How to Use
Enter hex, RGB, or HSL colors for the foreground (text) and background. The tool instantly calculates the contrast ratio and shows pass/fail status for WCAG AA and AAA levels. Use the swap button to reverse colors. Browse suggested accessible color alternatives if your combination fails.
Common Use Cases
- Ensuring web designs meet WCAG 2.1 accessibility requirements
- Verifying button and link text readability against backgrounds
- Preparing accessible PDFs and presentations
- Checking form labels and input text for compliance
- Validating brand color combinations for inclusive design