🎨

Contrast Checker

WCAG compliance for text/background color contrast.

Text Color

Background Color

Preview & Results

Sample Text

This is smaller text for testing small text contrast requirements

Contrast Ratio
21:1
Normal Text
AA ✓ AAA ✓
Large Text
AA ✓ AAA ✓

Copy Colors

WCAG Contrast Guidelines

AA Level Requirements

  • Normal text: Contrast ratio of at least 4.5:1
  • Large text (18pt+ or 14pt+ bold): Contrast ratio of at least 3:1
  • UI components and graphical objects: Contrast ratio of at least 3:1

AAA Level Requirements

  • Normal text: Contrast ratio of at least 7:1
  • Large text (18pt+ or 14pt+ bold): Contrast ratio of at least 4.5:1
  • Highest level of accessibility conformance

Why Contrast Matters

Proper contrast between text and background colors ensures that content is readable by everyone, including people with visual impairments or color blindness. Following WCAG guidelines helps make your website more accessible and inclusive.