What is Color Contrast Checker?
Check whether your foreground (text) and background color combination meets WCAG 2.1 accessibility standards. WCAG AA requires contrast ratio of 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 for normal text and 4.5:1 for large text. Calculates contrast ratio in real time, shows AA/AAA pass/fail status, and provides a color picker with live preview. Essential for UI designers, front-end developers, and accessibility compliance.
Use Cases
- ◆Checking text readability in UI design
- ◆Verifying accessibility compliance in front-end development
- ◆Testing brand color schemes for accessibility
- ◆Validating dark/light mode contrast
- ◆WCAG compliance review of color palettes
How to Use
- 1Pick or enter the foreground color (text)
- 2Pick or enter the background color
- 3See the contrast ratio and WCAG pass/fail status
- 4Adjust colors until the target level is met
Features
- ✓Free
- ✓WCAG 2.1 standard
- ✓Real-time calculation
- ✓AA/AAA testing
- ✓Color picker
- ✓Live preview
- ✓One-click color copy
- ✓Works everywhere
FAQ
What are the WCAG contrast standards?
WCAG 2.1: AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 for normal text and 4.5:1 for large text. Contrast ratios range from 1:1 to 21:1.
How is contrast calculated?
Using the WCAG 2.1 relative luminance formula: contrast = (L1 + 0.05) / (L2 + 0.05), where L is computed from sRGB to linear RGB with gamma correction.
What counts as large text?
WCAG defines large text as at least 18pt (24px) or 14pt (18.66px) bold. Large text has lower contrast requirements.
Is this tool free?
Yes, completely free. No accounts, no paywalls.
Can it check gradient backgrounds?
The current version supports solid colors only. For gradients, test with both the darkest and lightest colors.
What if my contrast fails?
Adjust the foreground or background to increase the brightness difference. The tool shows contrast changes in real time.