WCAG Contrast Checker
Check if your color combinations meet WCAG accessibility standards. Get real-time contrast ratios and fix suggestions.
Foreground (Text)
Background
Contrast Ratio
Live Preview
The quick brown fox jumps over the lazy dog
Normal Text (16px)
The quick brown fox jumps over the lazy dog
Large Text (24px Bold)
The quick brown fox jumps over the lazy dog
Small Text (14px)
Preset Color Pairs
How to check color contrast?
- 1Choose the foreground color — Select the text color using the color picker or type a HEX/RGB value.
- 2Choose the background color — Select the background color that the text will appear on.
- 3Check the results — See the contrast ratio and whether it passes WCAG AA/AAA for normal and large text.
- 4Apply suggestions — If the contrast fails, use the fix suggestions to find accessible alternatives.
Why use our WCAG Contrast Checker?
Our free online contrast checker helps designers and developers ensure their color combinations meet WCAG 2.1 accessibility standards. Good color contrast is essential for users with visual impairments, color blindness, and age-related vision changes. This tool provides real-time contrast ratio calculation, shows WCAG AA and AAA compliance levels for both normal and large text, and offers actionable fix suggestions when your colors don't pass. Use it to verify buttons, text overlays, form labels, and any foreground/background combination before shipping your design.