Loading Developer Playground

Loading ...

Skip to main content

Contrast Checker

WCAG AA/AAA contrast ratio calculator

Foreground (Text) Color

Background Color

Quick Presets

Suggested Foreground (Text) Colors

Lighter & darker variations of your foreground that meet WCAG AA • Sorted light to dark

Suggested Background Colors

Lighter & darker variations of your background that meet WCAG AA • Sorted light to dark

Contrast Ratio

21.00
:1

WCAG Compliance

Normal Text (under 18pt)
AA
AAA
Requires 4.5:1 (AA) or 7:1 (AAA)
Large Text (18pt+ or 14pt+ bold)
AA
AAA
Requires 3:1 (AA) or 4.5:1 (AAA)

Live Preview

Normal Text (16px)

The quick brown fox jumps over the lazy dog

Large Text (24px)

The quick brown fox jumps over the lazy dog

Bold Text (16px)

The quick brown fox jumps over the lazy dog

About WCAG Contrast Guidelines

Level AA (Minimum)

  • Normal text: 4.5:1 contrast ratio
  • Large text: 3:1 contrast ratio
  • Required for WCAG 2.0 Level AA compliance

Level AAA (Enhanced)

  • Normal text: 7:1 contrast ratio
  • Large text: 4.5:1 contrast ratio
  • Recommended for optimal accessibility
Note: Large text is defined as 18pt (24px) and larger, or 14pt (18.66px) and larger if bold.