WCAG Color Contrast Checker

Check WCAG 2.1 AA/AAA contrast ratios, get an APCA perceptual contrast score, simulate color blindness (deuteranopia, protanopia, tritanopia), and find accessible color pairs — all in your browser. No server upload.

Foreground (Text / Icon)

Background

—

WCAG Contrast Ratio

4.5

APCA L^c —

—

Normal text ≥ 4.5:1

—

AAA

Normal text ≥ 7:1

—

Large text ≥ 3:1

—

AAA

Large text ≥ 4.5:1

—

UI / Graphics ≥ 3:1

Live Preview

The quick brown fox jumps over the lazy dog. Bold text. Italic text.

Large heading text (24px / 18pt+)

Small caption text (12px) — avoid for body copy below AA.

Link Badge Input border

Colour Blindness Simulation How your pair looks to people with common CVDs. Simulated via Machado et al. (2009) LMS matrices.

Find Accessible Foreground Colours

Keeps your hue and saturation, sweeps lightness to find the nearest WCAG-compliant foreground shades. Click any swatch to apply it.