Color Contrast Checker

Test color combinations for accessibility compliance

Color Selection

Quick Combinations

Contrast Analysis

{{ contrastResult.ratio }}
Contrast Ratio
{{ contrastResult.grade }}
WCAG AA Normal
Minimum 4.5:1
WCAG AA Large
Minimum 3:1
WCAG AAA Normal
Minimum 7:1
WCAG AAA Large
Minimum 4.5:1

Live Preview

Heading Level 1

Heading Level 2

Heading Level 3

This is normal paragraph text that demonstrates how your chosen colors work together in real content. The quick brown fox jumps over the lazy dog.

This is bold text and this is italic text using the same color combination.

This is a link example

Improved Color Suggestions

Darker Foreground Options

Aa
{{ suggestion.color }}
{{ suggestion.ratio }}:1

Lighter Background Options

Aa
{{ suggestion.color }}
{{ suggestion.ratio }}:1

Accessibility Guidelines

WCAG AA (Minimum)

  • Normal text: 4.5:1 contrast ratio
  • Large text (18pt+ or 14pt+ bold): 3:1 contrast ratio
  • Required for most websites and applications

WCAG AAA (Enhanced)

  • Normal text: 7:1 contrast ratio
  • Large text (18pt+ or 14pt+ bold): 4.5:1 contrast ratio
  • Recommended for better accessibility

Text Size Guidelines

  • Large text: 18pt (24px) or larger
  • Large bold text: 14pt (18.7px) or larger
  • Normal text: Below these thresholds

Best Practices

  • Test with actual users with visual impairments
  • Consider color blindness (8% of men, 0.5% of women)
  • Don't rely on color alone to convey information
  • Test in different lighting conditions

Export Results