TPToolpazar

Global Araç

Contrast Checker

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

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.

Nasıl Kullanılır

  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.