Color Contrast Checker
Check contrast ratios and WCAG pass states between two colors.
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.
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.
How it works
Enter foreground and background colors to review the contrast ratio and whether the pair passes common accessibility thresholds. The result is produced immediately so you can review it before copying or using it elsewhere.
Privacy
The tool is designed to process ordinary input in your browser. Avoid pasting passwords, private keys, access tokens, personal records, or other sensitive production data into any online utility.
Limitations
This utility handles the focused workflow described on this page. Check the result before production use, especially when an input depends on a vendor-specific format, security rule, or external standard.