Color Contrast Checker

12.63
Contrast Ratio
AAAAA
Normal Text
Large Text
UI Components —

Preview

Small text (16px): This is how your text looks. The quick brown fox jumps over the lazy dog. 0123456789

Large text (24px): This is how your text looks.

How to Use

  1. Pick colors — Set foreground (text) and background colors via color picker or HEX input.
  2. Read the ratio — The contrast ratio updates instantly. Green = good, red = insufficient.
  3. Check WCAG levels — See pass/fail for AA and AAA at normal and large text sizes.
  4. Swap colors — Quick-swap foreground and background to test both directions.

What Is Color Contrast?

Color contrast is the difference in luminance between foreground and background colors. WCAG 2.1 defines minimum ratios to ensure text is readable for people with visual impairments.

AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 for normal text, 4.5:1 for large text. Large text is 18pt+ or 14pt+ bold.

WCAG Levels at a Glance

AA Normal: 4.5:1
AA Large: 3:1
AAA Normal: 7:1
AAA Large: 4.5:1
UI Components: 3:1

Tips & Best Practices

Aim for AA minimum

Most accessibility laws require WCAG AA compliance. AAA is ideal but not always mandatory.

Don't rely on color alone

Use icons, underlines, or bold weight alongside color to convey meaning for colorblind users.

Test real content

Check contrast with your actual font sizes and weights — thin fonts need higher contrast.

Dark mode too

Light text on dark backgrounds often needs different ratios than dark-on-light. Test both.

Frequently Asked Questions

What contrast ratio do I need?

At minimum 4.5:1 for normal text (WCAG AA). For large text (18px+ bold or 24px+), 3:1 suffices. AAA level requires 7:1.

What counts as "large text"?

18pt (24px) regular weight, or 14pt (18.66px) bold. These thresholds are defined by WCAG 2.1.

Is WCAG compliance legally required?

In many countries, yes — especially for government and public-facing websites. ADA (US), EAA (EU), and similar laws reference WCAG.

Does this check work for colorblind users?

Contrast ratio measures luminance difference, which helps all users including those with color vision deficiency. But also test with colorblind simulation tools.