Color Contrast Checker

Check if your color combinations meet WCAG accessibility standards

Preview

The quick brown fox jumps over the lazy dog

Regular text: The quick brown fox jumps over the lazy dog. 1234567890

Large text: The quick brown fox jumps over the lazy dog.

Contrast Ratio: 21:1

WCAG AA

Normal Text (4.5:1) ✓ Pass
Large Text (3:1) ✓ Pass

WCAG AAA

Normal Text (7:1) ✓ Pass
Large Text (4.5:1) ✓ Pass

Note: Large text is defined as 14pt (18.66px) bold or 18pt (24px) regular and above.

Quick Tests

WCAG Accessibility Guidelines

Understanding Contrast Ratios

The contrast ratio is a measure of the difference in perceived brightness between two colors. Higher ratios mean better readability.

  • • 1:1 - No contrast (same color)
  • • 4.5:1 - Minimum for normal text (AA)
  • • 3:1 - Minimum for large text (AA)
  • • 7:1 - Enhanced for normal text (AAA)
  • • 21:1 - Maximum contrast (black on white)

When to Use Which Standard

WCAG AA (Recommended)

Suitable for most websites and applications. Required for many government and public sector sites.

WCAG AAA (Enhanced)

For specialized applications where readability is critical, such as educational content or elderly users.

Important Considerations

  • • Contrast requirements don't apply to logos or incidental text
  • • Consider users with color blindness - don't rely on color alone
  • • Test on actual devices - screen quality affects perceived contrast
  • • Background images and gradients can affect readability