Contrast Checker

What this tool does

The Contrast Checker tests whether two colours meet accessibility contrast ratios for normal text, large text, and UI components under WCAG 2.x guidelines.

It updates live as you change foreground and background colours, so you can fix illegible buttons and body copy before launch.

How to use it

1. 1Enter or pick a foreground (text) colour.
2. 2Enter or pick a background colour.
3. 3Read the contrast ratio and pass/fail badges for AA and AAA levels.
4. 4Swap colours if needed and retest variations (hover states, borders).
5. 5Copy the winning pair into your stylesheet or design system.

Frequently asked questions

What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA targets 7:1 and 4.5:1 respectively for stricter accessibility.

Does this check non-text elements?

UI components and graphical objects generally need at least 3:1 against adjacent colours. Use the ratio as a guide for icons and form borders too.

Is passing AA enough?

AA is the common legal and industry baseline. AAA is better when you can achieve it without harming design, especially for small text on tinted backgrounds.