Color Contrast Checker
About Color Contrast Checker
Choose foreground and background colors to calculate the contrast ratio, preview the colors together, compare WCAG pass or fail status, and get accessible foreground suggestions.
How to Use
Choose foreground and background colors to calculate the contrast ratio, preview the colors together, compare WCAG pass or fail status, and get accessible foreground suggestions. Adjust the Foreground color and Background color fields, then review the contrast results before copying or downloading it.
- Open the tool : Go to Color Contrast Checker to use the tool.
- Review the controls : Check the available fields and actions before you start.
- Use the result : Run the action you need, then copy or share the output.
Common Questions
What does Color Contrast Checker help inspect or debug?
Check foreground and background color contrast against WCAG thresholds.
Can I copy or export the result from Color Contrast Checker?
Yes. Use the copy button or any download option that appears after the result is generated.
Fields
- Foreground color
- Background color
Actions
- Check contrast