Contrast Checker

Calculate contrast ratio between text and background colors and check WCAG compliance.

Hello World

The quick brown fox jumps over the lazy dog.

Contrast Ratio

Low Contrast

Good for Large Text

Good Contrast (AA)

Excellent Contrast (AAA)

WCAG AA (Normal Text)
Requires 4.5:1
WCAG AA (Large Text)
Requires 3.0:1
WCAG AAA (Normal Text)
Requires 7.0:1
WCAG AAA (Large Text)
Requires 4.5:1

Features

  • Check contrast ratio between text and background colors.
  • Validate against WCAG 2.1 accessibility guidelines (AA and AAA).
  • Real-time preview of text readability.
  • Detailed pass/fail reports for Normal and Large text.

How to Use

  1. Select a Text Color.
  2. Select a Background Color.
  3. Review the calculated Contrast Ratio.
  4. Check the WCAG compliance status (Pass/Fail) below to ensure accessibility.