Skip to content
Free Tool Arena

Developer Utilities · Free tool

Contrast Checker

Check color contrast against WCAG AA and AAA targets for normal and large text. Live preview and pass/fail badges.

Updated April 2026

Normal text sample — The quick brown fox jumps over the lazy dog.

Large text sample — 24px bold

18.66px bold also counts as large

Foreground
Background
17.85:1contrast ratio
WCAG AA — Normal (4.5:1)Pass
WCAG AA — Large (3:1)Pass
WCAG AAA — Normal (7:1)Pass
WCAG AAA — Large (4.5:1)Pass

What it does

Check a foreground/background color pair against WCAG 2.2 AA (4.5:1 for normal text, 3:1 for large) and AAA (7:1 / 4.5:1) contrast targets. Live preview shows sample normal and large text on the chosen background, with pass/fail badges on both levels.

Pair with color picker, color converter, and alt text helper for an accessibility pass.

How to use it

  1. Enter or pick foreground and background colors.
  2. Read the contrast ratio and AA/AAA badges.
  3. Nudge colors until both badges pass for your text size.
  4. Copy the final hex pair into your design system.