Color Contrast Checker
Pick two colors and see the contrast ratio with a live preview.
Contrast ratio
—
The quick brown fox jumps over the lazy dog
Design tool
Color Contrast Checker
Check text and background colors against WCAG AA and AAA accessibility standards.
All tools
Related Tools
More design and developer utilities.
How To Use This Tool
Pick a text color and a background color. The contrast ratio and the WCAG AA / AAA pass marks update instantly, and the preview shows how the combination actually looks.
Common Uses
Checking accessibility of buttons, body text, and UI states; meeting WCAG requirements; and choosing readable color pairs for web and print.
Why This Tool Is Useful
Low contrast makes text hard to read, especially for users with low vision. WCAG sets minimum contrast ratios (4.5:1 for normal text, 3:1 for large). This checker tells you instantly whether a color pair passes.
Accuracy And Privacy
The ratio is computed with the official WCAG relative-luminance formula, locally in your browser - nothing is uploaded.
FAQ
What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal text.
What counts as large text?
Roughly 18pt (24px) regular, or 14pt (about 18.7px) bold and larger.