Color Contrast Checker
Calculate the contrast ratio between two hex colors. Check foreground and background contrast while designing interfaces. Enter 3- or 6-digit hex colors; also test real components, focus states, and the relevant accessibility requirements.
Use the tool
Enter your values, then run it. The result is generated in your browser.
Result
Calculated
How to use Color Contrast Checker
- Enter foreground and background colors.
- Compare with the applicable threshold.
- Test hover, focus, disabled, and error states in the real interface.
Formula and assumptions
Convert sRGB channels to relative luminance. Contrast ratio = (lighter luminance + 0.05) ÷ (darker luminance + 0.05).
This is a numeric contrast aid, not a complete accessibility audit.
Frequently asked questions
What ratio is used for normal text?
A common WCAG AA target is 4.5:1 for normal text.
What about large text?
A common WCAG AA target is 3:1.
Does passing guarantee accessibility?
No, other accessibility requirements remain.
About this tool
Check foreground and background contrast while designing interfaces. Enter 3- or 6-digit hex colors; also test real components, focus states, and the relevant accessibility requirements.
No account is required. The tool runs in this browser and this starter build has no form-submission backend. See the method and assumptions before relying on estimates.