Color Contrast Checker: WCAG AA/AAA Accessibility Test | Free
4 usesSample Text
The quick brown fox jumps over the lazy dog. 0123456789
15.39:1
Contrast Ratio
Contrast Checking Tips
WCAG AA/AAA Testing
Check if your text and background colors meet WCAG 2.1 accessibility standards for both normal and large text.
Instant Contrast Ratio
See the precise contrast ratio (e.g., 4.5:1) calculated using the WCAG luminance formula.
Accessibility Made Easy
Quickly identify color combinations that are readable for users with visual impairments.
Swap Colors Instantly
One-click button to swap foreground and background colors for quick comparison.
Frequently Asked Questions
What is WCAG contrast ratio?
WCAG requires minimum contrast ratios: 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for normal text (AAA), and 4.5:1 for large text (AAA).
What counts as large text?
Large text is 18pt (24px) regular or 14pt (18.67px) bold, per WCAG guidelines.
Why is color contrast important?
Sufficient contrast ensures text is readable for users with low vision or color blindness, and is required by accessibility laws in many countries.
Is this tool free?
Yes, completely free. No signup needed.
How do I test the color contrast of text over a gradient background?
Our free Color Contrast Checker is designed for solid color pairs. When dealing with text over a gradient, identify the point in the gradient where your text color has the *lowest* contrast. You should test your foreground text color against both the lightest and darkest sections of the gradient background to ensure WCAG AA or AAA compliance across the entire design.
What should I do if my chosen brand colors fail WCAG contrast?
If your brand colors fail WCAG contrast, you'll need to adjust either your foreground (text) or background color. Our free Color Contrast Checker helps you iterate quickly. Slightly modify the failing color's hue, saturation, or lightness. Re-enter the new color codes into the tool and retest instantly. Aim for the minimum passing ratio while staying as close to your brand palette as possible, prioritizing readability for all users.
How to Check Color Contrast
- Set foreground (text) and background colors
- View the contrast ratio and WCAG results
- Adjust colors until you pass AA or AAA
- Use the swap button to test reversed colors