WCAG Color Contrast Checker

Test any foreground/background color combination against WCAG 2.1 accessibility standards — shows the exact contrast ratio and AA/AAA pass/fail status.

Normal Text Sample (18px)

Small body text sample (14px)

Large Bold Text (24px Bold)

What Does This Tool Do?

Test any text and background color combination against WCAG 2.1 accessibility guidelines. Shows the exact contrast ratio and AA/AAA compliance for both normal and large text sizes, with a live preview.

Key Features

♿
WCAG 2.1
Tests AA and AAA levels for normal and large text.
👁️
Live Preview
See the actual text rendered with your colors.
📊
Exact Ratio
Precise contrast ratio displayed to 2 decimal places.
⚡
Instant
Updates as you change colors.

How to Use

  1. Enter or pick the foreground (text) color.
  2. Enter or pick the background color.
  3. Read the contrast ratio and pass/fail results.

Frequently Asked Questions

What is WCAG?▾
Web Content Accessibility Guidelines (WCAG) is an international standard for making web content accessible. Level AA is the standard legal requirement in many countries.
What contrast ratio do I need?▾
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px+ or 14px bold). AAA (enhanced) requires 7:1 and 4.5:1 respectively.
What counts as large text?▾
Text at 18pt (24px) or larger in normal weight, or 14pt (approximately 18.67px) or larger in bold weight is considered large text under WCAG.