Question 1

What contrast ratio should I aim for?

Accepted Answer

WCAG 2.1 recommends at least 4.5:1 for body copy, 3:1 for large or bold text, and 7:1 if you want AAA level readability. Headings, icons and form controls should all meet at least the 3:1 threshold.

Question 2

How do I interpret the pass/fail badges?

Accepted Answer

Each badge maps to a WCAG rule. When you see a pass, the foreground/background pairing meets or exceeds that guideline. A “Needs work” badge tells you exactly which requirement is falling short.

Question 3

Can I use RGB, HSL or named colors?

Accepted Answer

Absolutely. Enter HEX values like #111827, functional notations like rgb(15, 23, 42), hsl(220, 33%, 9%) or even CSS color names. The checker validates them instantly.

Question 4

Does font size change the ratio?

Accepted Answer

The mathematical ratio stays the same, but WCAG allows larger text (18px regular or 14px bold) to meet a lower minimum of 3:1. Use the size slider to preview how your words will feel at different scales.

Question 5

How do the quick fixes work?

Accepted Answer

When the colors fail AA, we nudge the text and background toward lighter or darker variants until they cross 4.5:1. Apply the suggestion with a click, then fine tune.

Question 6

Can I document these results for audits?

Accepted Answer

Yes. The live ratio read-out and recommended adjustments make it easy to capture evidence for accessibility checklists, design system documentation or client sign-off.

Color Contrast Checker

Accessible preview

Contrast checker FAQs