Color Contrast Checker

Test text and background color contrast for WCAG accessibility compliance.

Sample text preview
4.47:1
Contrast ratio
Fail
WCAG AA (normal)
Pass
WCAG AA (large)
Fail
WCAG AAA

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px+ or 14px bold).

What this tool does

Low contrast text fails WCAG accessibility standards and is hard to read on mobile screens in sunlight. This checker calculates contrast ratio between text and background colors.

How to use it

  1. 1

    Pick or enter hex colors for text and background.

  2. 2

    Preview sample text with your colors.

  3. 3

    Check WCAG AA and AAA pass/fail results.

WCAG levels

AA requires 4.5:1 for normal text, 3:1 for large text (18px+ or 14px bold). AAA is stricter at 7:1 and 4.5:1 respectively.

Accessible design benefits all users — not only those using screen readers.

Tips

  • Test brand colors on both light and dark backgrounds.
  • Do not rely on color alone to convey meaning — add icons or labels.

Related tools

All tools →

Frequently asked questions

What contrast ratio is required?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text.

Why does contrast matter for SEO?

Accessible sites improve user experience. Google considers UX signals in rankings.