Contrast Checker

Check color contrast ratio for accessibility

How to use

1. Enter a foreground (text) colour and a background colour.
2. See the contrast ratio and whether it passes WCAG AA/AAA.
3. Adjust colours until the text is readable for everyone.

Why use this tool

• WCAG check: Shows the contrast ratio and pass/fail for AA and AAA accessibility levels.
• Accessible design: Helps ensure text is readable for low-vision users.
• 100% private: Everything runs in your browser. Your data is never uploaded to a server, so it's safe for confidential content.

Frequently asked questions

What contrast ratio do I need?

WCAG AA requires at least 4.5:1 for normal text (3:1 for large text); AAA requires 7:1. Higher is more readable.

Why does contrast matter?

Sufficient contrast makes text readable for people with low vision or colour blindness, and it's often a legal accessibility requirement.

Is it private?

Yes. The check runs entirely in your browser.

Back to all tools