Free Color Contrast Checker Tool Online
Measure color contrast ratios and verify WCAG AA and AAA accessibility compliance for text, backgrounds, and user interface elements.
IN: Two colors · OUT: Contrast ratio & WCAG pass/fail · RUNS: 100% in your browser
Sample heading text
The quick brown fox jumps over the lazy dog.
PASS
AA — normal text
PASS
AA — large text
PASS
AAA — normal text
PASS
AAA — large text
Frequently asked questions
What contrast ratio do I need to pass WCAG AA?+
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold), which is the most commonly targeted accessibility standard for web content.
What's the difference between AA and AAA?+
AAA is a stricter standard requiring 7:1 for normal text and 4.5:1 for large text, intended for content where maximum readability matters, such as content aimed at users with low vision.
How is contrast ratio actually calculated?+
It's based on the relative luminance of both colors (a measure of perceived brightness following the WCAG formula), compared as a ratio between the lighter and darker color, ranging from 1:1 (no contrast) to 21:1 (black on white).
Why does swapping foreground and background not change the ratio?+
Contrast ratio is symmetric — it only depends on the luminance difference between the two colors, not which one is 'on top', so black text on white and white text on black have the identical ratio.
Does passing WCAG guarantee my design is fully accessible?+
No, contrast ratio is one important factor among many (font size, spacing, focus indicators, alt text, etc.) — passing this check addresses color contrast specifically, not overall accessibility compliance.
Is my color data sent anywhere?+
No, the luminance and ratio calculations run entirely in your browser using standard WCAG formulas.