Color Contrast Checker

Test any foreground and background combination against WCAG 2.1 contrast requirements. Paste brand colors, inspect luminance, and keep an eye on which scenarios pass or fail in real time.

Foreground Color

Accepts #RGB, #RRGGBB, or CSS color keywords.

Background Color

Try brand tokens or any CSS-friendly value.

Quick Actions

  • Target 4.5:1 for body text (WCAG AA).
  • Large text (18px+) needs at least 3:1.
  • AAA demands 7:1 for body copy.
Pick colors to evaluate contrast ratios instantly.

Contrast Ratio

--

Waiting for valid colors.

Foreground luminance --
Background luminance --

WCAG Outcomes

  • Normal Text — WCAG AA (4.5:1) Pending
  • Normal Text — WCAG AAA (7:1) Pending
  • Large Text — WCAG AA (3:1) Pending
  • Large Text — WCAG AAA (4.5:1) Pending
  • UI Elements & Icons — WCAG AA (3:1) Pending

Suggestions

  • Waiting for colors...

Preview

18px
Preview Headline
The quick brown fox jumps over the lazy dog.