Color Contrast Checker - Review Foreground and Background Ratios
Check foreground and background color contrast, view the ratio, and compare it with common accessibility thresholds.
Runs in your browser with local processing whenever possible. No upload is required for local-only features.
What this tool does
Check foreground and background color contrast, view the ratio, and compare it with common accessibility thresholds.
How to use it
- Choose foreground and background colors.
- Read the contrast ratio and pass/fail indicators.
- Test normal and large text in the actual component context.
Example workflow
Check muted text on a dark panel, then increase contrast if the ratio is too low.
Frequently asked questions
Does a pass result prove full accessibility?
No. It covers color contrast only; also test focus, structure, motion, and screen-reader behavior.
Can I use HEX and RGB colors?
Use the formats supported by the visible controls and verify the final CSS values.