Design tool
Color Contrast Checker
Check the contrast ratio between foreground and background colors for accessible interface design.
Preview text — Toolsxar
Result
Your result will appear here.
Privacy note: most tools process input locally in your browser.
About the Color Contrast Checker
Calculate the WCAG-style contrast ratio between two sRGB colors and display a text preview with a basic pass/fail indication.
How to use this tool
Choose foreground and background colors, inspect the preview, then click Check contrast. Adjust the colors if the ratio is too low.
Example
A contrast ratio of 4.5:1 is the common WCAG AA target for normal-sized text.
Tips for better results
Automated contrast is only one accessibility check. Verify font size, focus states, semantics and other accessibility requirements separately.
Frequently asked questions
What ratio should normal text meet?
WCAG AA commonly uses 4.5:1.
Does passing guarantee full accessibility?
No, it checks color contrast only.