Color Contrast
Check foreground and background colors against WCAG AA and AAA contrast ratios.
About this tool
About
This free color contrast checker measures the contrast ratio between foreground and background colors against WCAG 2 AA and AAA. See live pass/fail results and a text preview—no signup, nothing uploaded.
How it works
Pick or type two hex colors. The tool computes relative luminance and the WCAG contrast ratio in your browser, then checks normal and large text thresholds for AA and AAA. Swap colors, try presets, or sample a color with the eyedropper when your browser supports it.
Steps
- Set foreground (text) and background colors with the pickers or hex fields.
- Optionally load a preset or swap the two colors.
- Read the contrast ratio and AA / AAA pass or fail badges.
- Check the live preview for normal and large text.
- Copy the ratio or a CSS color snippet into your design system.
Frequently asked questions
Is this contrast checker free?
Yes. It is free to use with no signup. Check as many pairs as you need.
What is a good contrast ratio?
WCAG AA needs at least 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
WCAG treats text as large when it is at least 18pt (about 24px) or 14pt bold (about 18.5px bold). This tool’s preview shows both normal and large samples.
Are my colors uploaded?
No. All math runs in your browser. Colors are not sent to Utility Tools servers.
Why is there an eyedropper on some browsers only?
The EyeDropper API is not available everywhere. When your browser supports it, you can sample colors from the screen; otherwise use the color picker or hex field.
Does this use APCA or WCAG 3?
No. This tool uses the WCAG 2.x contrast ratio formula, which is what most accessibility audits still require.
Privacy: Your colors stay in this browser. A draft may be remembered in local storage on this device. Nothing is sent to our servers.