Color Contrast Checker
Check the WCAG contrast ratio between text and background, with AA and AAA pass/fail.
About the Color Contrast Checker
Check the WCAG contrast ratio between text and background, with AA and AAA pass/fail. Every value is computed locally with vanilla JavaScript — there is no server round-trip, no sign-up and no limit on how many times you use it.
How to use
Set text color
Choose your foreground (text) color.
Set background color
Choose the background the text sits on.
Read the ratio
The contrast ratio and a live text preview update instantly.
Check the badges
See at a glance whether the pair passes WCAG AA and AAA.
Benefits
Ship accessible text
Catch low-contrast combinations before they reach users.
Know the exact ratio
Get the precise number, not just a pass or fail.
Test quickly
Swap colors and re-check in real time.
Features & supported formats
Features
- Foreground and background inputs
- Live preview text
- Exact contrast ratio
- AA and AAA pass/fail badges
- Large-text thresholds
Supported formats
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
What counts as large text?
Large text is roughly 24px and above for regular weight, or about 18.66px and above when bold.
Why does contrast matter?
Sufficient contrast ensures people with low vision or in bright conditions can read your text comfortably.
Does the ratio consider color blindness?
Contrast ratio is based on luminance; pair this tool with the color blindness simulator for a fuller picture.
Can I check white on a color?
Yes. Set the foreground to white and the background to your color to test button and badge legibility.