Contrast Checker

Check color contrast against WCAG 2.1 AA/AAA standards with live text preview.

Text Color
Background
17.06:1
AAANormal Text
AAALarge Text

Heading Text

This is body text at 16px. Check if it is readable against the background color.

Small text at 12px — often the hardest to read.

WCAG 2.1
AA — Normal text: 4.5:1 / Large text (18px bold or 24px+): 3:1
AAA — Normal text: 7:1 / Large text: 4.5:1

What is Color Contrast?

Color contrast measures the luminance difference between two colors, expressed as a ratio (e.g., 4.5:1). WCAG 2.1 defines minimum contrast requirements for text readability. This tool calculates contrast ratios in real time and checks AA/AAA compliance.

  • WCAG 2.1 AA and AAA compliance checking
  • Live preview at different text sizes
  • One-click foreground/background swap
  • Manual HEX color input

FAQ