Check color contrast for accessibility

Contrast is one of the most important — and most overlooked — parts of accessible design. If text doesn’t have enough contrast against its background, people with low vision, color vision deficiencies, or simply a sunlit screen will struggle to read it.

This checker computes the WCAG 2.1 contrast ratio between any two colors and tells you, at a glance, whether the pair passes the AA and AAA thresholds for both normal and large text. A live preview shows the actual text rendered on the background so you can trust the number.

How to use the Contrast Checker

1. Set the text color. Enter the foreground color you plan to use for text or icons.
2. Set the background. Enter the surface color the text will sit on — a page background, card, or button fill.
3. Read the result. The ratio updates instantly with clear Pass / Fail labels for AA and AAA at both text sizes.

Practical examples

Why the Contrast Checker matters

• WCAG AA contrast is a legal accessibility requirement in many regions and a baseline expectation for professional products.
• Good contrast helps everyone, not only users with disabilities — it improves readability on cheap screens, in bright light, and for tired eyes.
• Catching contrast problems early is far cheaper than retrofitting an entire design system after launch.