Color Contrast Checker

What is the Color Contrast Checker?

Check WCAG 2.x contrast ratio between text and background colors for accessibility. Low-contrast text is hard to read for people with low vision and for anyone on a phone in sunlight, and WCAG contrast ratios give a clear pass or fail.

How to use the Color Contrast Checker

1. Enter your text color, your background color.
2. Results update automatically as you type; you can also press Calculate.
3. Read the output: contrast ratio, wcag results.
4. Use the 📊 chart to see the result visually, then copy or share it.

Formula and method

Worked example

With text color = #141a2e, background color = #ffffff, the Color Contrast Checker returns contrast ratio: 17.26 : 1; wcag results: Normal text: AA ✅ AAA ✅ | Large text: AA ✅ AAA ✅.

Where the Color Contrast Checker helps in real life

Your designer chose light gray text on a white background for a modern look. The checker shows whether it meets the 4.5:1 ratio recommended for body text.

You are styling buttons in your brand color with white labels. Testing the pair before launch avoids rebuilding components after an accessibility review.

Common mistakes to avoid

• Judging contrast by eye on a bright, high-quality monitor.
• Testing default states but not hover, focus or disabled states.
• Forgetting text placed over photos or gradients.
• Using thin, small fonts with borderline contrast.

💡 Practical tip: Large text (around 24 px, or 18.66 px bold) can pass with a 3:1 ratio, while smaller text needs 4.5:1.

Tips for better results

• Aim for at least 4.5:1 for normal text and 3:1 for large text.
• Test every text and background pair in your design system.
• Check dark mode separately from light mode.

Related tools