Log in
Home/Design Tools/Contrast Checker
Large Text Preview
This is what normal body text looks like on this background. Good contrast ensures everyone can read your content comfortably without straining their eyes.
Contrast Ratio
4.45 : 1
Poor (Large Text Only)
WCAG AAFAIL
Normal Text (4.5:1)
WCAG AAPASS
Large Text (3:1)
WCAG AAAFAIL
Normal Text (7:1)
WCAG AAAFAIL
Large Text (4.5:1)

What is Color Contrast?

Color contrast measures the luminance difference between a foreground color (text) and a background color. High contrast (black on white = 21:1) is easy to read for everyone. Low contrast can make text unreadable for users with low vision or color blindness — and may expose your site to accessibility liability.

WCAG Contrast Requirements

  • WCAG AA — Normal Text: minimum 4.5:1 — for body text below ~24px regular or ~19px bold.
  • WCAG AA — Large Text: minimum 3:1 — for headings ≥24px or ≥19px bold.
  • WCAG AAA — Normal Text: minimum 7:1 — the gold standard for maximum readability.
  • WCAG AAA — Large Text: minimum 4.5:1.

How to Use This Tool

  1. Click the color swatch or type a hex code for Background Color.
  2. Set the Text Color the same way.
  3. The live preview shows exactly how your text appears on that background.
  4. All four WCAG pass/fail badges and the contrast ratio update instantly.
  5. Use ↕ Swap to reverse foreground and background colors.

Why Accessible Contrast Matters

WCAG 2.1 AA compliance is required by law in many countries (ADA in the US, EN 301 549 in the EU, AODA in Canada). Beyond legal risk, accessible contrast improves readability for all users — including those reading in bright sunlight or on low-quality displays.

Is My Data Sent to a Server?

No — contrast is calculated entirely in your browser. No colors or data are sent anywhere.