Color Contrast Checker
Check contrast ratios and WCAG pass states between two colors.
Contrast ratio calculation
WCAG AA and AAA hints
Foreground and background preview
Color pair
Compare foreground and background colors for readability and accessibility checks.
Contrast results
Review the ratio and common WCAG pass states before shipping a color pair.
Sample contrast text
Ratio
17.85
AA normal
Pass
AA large
Pass
AAA normal
Pass
Common use cases
- Checking text readability on UI surfaces
- Reviewing brand color pairings for accessibility
- Testing design choices before shipping components
FAQ
Does it check normal and large text thresholds?
Yes. It highlights common WCAG thresholds for normal and large text so you can judge the pairing more clearly.
Can I use brand colors directly?
Yes. Enter your HEX values and the checker will calculate the contrast ratio and pass states.
More guides