Color Contrast Checker

What the Color Contrast Checker does

The Color Contrast Checker calculates the contrast ratio between a text color and a background color, and checks it against WCAG accessibility guidelines, so you can confirm text will actually be readable for people with low vision.

How to use it

1. Enter or pick your text color.
2. Enter or pick your background color.
3. Review the calculated contrast ratio against WCAG AA and AAA thresholds.

Common uses

• Checking a website's text and background color combination meets accessibility standards.
• Verifying a design mockup's color choices before development begins.
• Testing a brand's color palette for accessible text/background pairings.
• Auditing an existing site for contrast issues as part of an accessibility review.
• Comparing a few candidate color combinations to pick the most readable one.

Good to know

WCAG defines different minimum contrast ratios depending on text size and the level you're targeting — normal text needs a 4.5:1 ratio for AA compliance while large text only needs 3:1, and AAA compliance raises both thresholds further, so check which specific standard applies to your project before treating a borderline ratio as a pass or fail.

WCAG contrast guidelines exist because low-contrast text genuinely excludes a meaningful share of users — not just those with diagnosed visual impairments, but also anyone viewing a screen in bright sunlight, using an older or lower-quality display, or simply experiencing normal age-related vision changes, which together make up a much larger population than "accessibility" might suggest at first glance.