Contrast Ratio Checker
Compare foreground and background colors against WCAG contrast thresholds.
Check accessible color contrast
WCAG contrast thresholds depend on text size and conformance level. Normal text generally requires 4.5:1 for AA, while large text requires 3:1.
Contrast is one part of accessible color use; meaning should not depend on color alone.
How to use the Contrast Ratio Checker
- Provide the complete value or source material you want to inspect.
- Run the check and review each result or warning.
- Correct the original source and repeat the check before using it.
Practical example
Preview the result at several screen sizes and against the actual colors and typography used by the project.
What this tool cannot guarantee
Generated values are a starting point and should be tested for browser support, accessibility and compatibility with the full design system.
Continue this workflow with the Color Converter
Frequently asked questions
Is the Contrast Ratio Checker free to use?
Yes. It is available without an account or paid subscription.
Is my input uploaded or stored?
The core operation runs in your browser. Avoid pasting secrets into any web page unless the individual tool explicitly explains how the data is handled.
Should I review the result before using it?
Yes. Check the output for your project and test it in the intended environment before production use.