Contrast Checker
About the Contrast Checker
The Contrast Checker measures the contrast ratio between a text color and its background and tells you whether it meets accessibility guidelines. Good contrast is the difference between text everyone can read and text that disappears for many users.
Web accessibility standards (WCAG) set minimum contrast ratios so people with low vision or color deficiencies can read your content. Checking a color pair before you ship prevents an all-too-common accessibility failure and keeps your design legible for everyone.
Checking happens in your browser with no upload or account. Enter two colors and instantly see the ratio and whether it passes — fast feedback while you design.
How to use the Contrast Checker
- Enter or pick the text (foreground) color.
- Enter or pick the background color.
- Read the calculated contrast ratio.
- Check whether it passes the AA and AAA accessibility levels.
- Adjust the colors until the contrast passes for your text size.
Common use cases
- Verifying that body text meets accessibility contrast standards.
- Checking button and link colors against their backgrounds.
- Ensuring a brand color pairing is legible before launch.
- Fixing low-contrast combinations flagged in an accessibility audit.
Frequently asked questions
What contrast ratio do I need?
WCAG generally requires at least 4.5:1 for normal text and 3:1 for large text to meet AA, with higher ratios for AAA. The checker shows whether your pair meets these thresholds.
Why does text size matter?
Larger text is readable at lower contrast, so the required ratio is lower for large text. The tool accounts for this when reporting pass or fail.
Does this guarantee my whole site is accessible?
It verifies the contrast of a specific color pair, which is one important part of accessibility. A full audit also covers structure, labels, and keyboard use.
Is anything uploaded?
No. The calculation runs in your browser, so nothing leaves your device.
How do I get my exact colors to test?
Use the Color Picker to sample colors from your design, then paste them here to check their contrast.