Color Contrast Checker

Check text and background colors against WCAG 2.1 (AA/AAA) and modern APCA contrast — with a live preview, an eyedropper, and a smart fix that nudges any color to the nearest accessible shade.

Colors

Pick a text and background color to compare.

Text

rgb(31, 41, 55) · hsl(215, 28%, 17%)

Background

rgb(255, 255, 255) · hsl(0, 0%, 100%)

Preview

How real content reads at these colors.

Large heading text

The quick brown fox jumps over the lazy dog. Small body copy at 16px shows whether paragraphs stay comfortable to read at these two colors.

Secondary 14px text — the most common failure point for contrast.

Outlined buttonSolid buttonA text link

14.68:1Passes AAA

AA · Normal text

≥ 4.5:1

AA · Large text

≥ 3:1

AAA · Normal text

≥ 7:1

AAA · Large text

≥ 4.5:1

UI & graphics

≥ 3:1

APCA Lc 101

WCAG 3 perceptual contrast

Excellent · any text

Meets AA for normal body text.