PXLTools

Contrast Checker

Check color contrast for WCAG accessibility

The quick brown fox jumps over the lazy dog

Normal text (16px) — This is how your body text will look with these colors.

Small text (14px) — Captions, footnotes, and secondary content.

Contrast Ratio (click to copy)
Pass
AA Normal
≥4.5:1
Pass
AA Large
≥3:1
Pass
AAA Normal
≥7:1
Pass
AAA Large
≥4.5:1

How to use Contrast Checker

  1. Pick or enter a foreground (text) color and a background color.
  2. The preview updates in real time showing how text looks with your combination.
  3. Check the pass/fail results against WCAG AA and AAA levels.
  4. Swap colors with one click to test the inverse combination.

Why color contrast matters

Color contrast directly affects readability. Low contrast forces users to strain their eyes, and for the 300+ million people worldwide with color vision deficiency, poor contrast can make content completely unreadable.

WCAG (Web Content Accessibility Guidelines) defines two compliance levels. AA is the standard most organizations target — it requires a 4.5:1 ratio for normal text. AAA is stricter at 7:1 and is recommended for critical content like medical or legal information.

Since June 2025, the European Accessibility Act requires digital services to meet accessibility standards. In the US, the ADA has been interpreted to cover websites. Meeting WCAG AA is the safest legal baseline.

Frequently Asked Questions

What contrast ratio is required for WCAG compliance?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text that is at least 18 points (24px) regular weight, or at least 14 points (18.66px) bold. These thresholds apply to both AA and AAA levels.
Why does contrast matter?
About 1 in 12 men and 1 in 200 women have color vision deficiency. Low contrast also affects users with low vision, older adults, and anyone viewing screens in bright environments.
Is WCAG compliance legally required?
In many jurisdictions, yes. The European Accessibility Act (effective June 2025), the ADA in the US, and Section 508 all reference WCAG standards.