Color Contrast Checker

Verify WCAG 2.x contrast ratios for accessible foreground and background color combinations

Foreground Color

Text or icon color

Hex value

Background Color

Surface or container color

Hex value

Contrast Results

Contrast Ratio

16.25:1

Excellent

AA NormalPass≥ 4.5:1

Body text, 18px regular or smaller

AA LargePass≥ 3:1

Large text, 18px bold or 24px regular

AAA NormalPass≥ 7:1

Enhanced body text requirement

AAA LargePass≥ 4.5:1

Enhanced large text requirement

Live Preview

How text appears at this color combination

Display Heading Text

Subheading or UI Label

Body copy reads at this size. Legibility depends on both the contrast ratio and the text size — smaller, lighter type needs higher contrast to remain comfortable for extended reading.

Small text — captions, metadata, supporting labels.

Button (inverted)Outline button

#171310foreground

#F4F0E8background

Common Color Pairs

Click a pair to load it for inspection

WCAG Contrast Requirements

Level AA (minimum)

Normal text (under 18px or non-bold)4.5:1
Large text (18px+ or 14px bold)3.0:1
UI components & graphical elements3.0:1

Level AAA (enhanced)

Normal text (enhanced)7.0:1
Large text (enhanced)4.5:1

AAA is not required for all content. Aim for it in critical reading contexts — legal text, health information, long-form editorial.