Skip to content
Text & Dev Tools

WCAG Contrast & Color-Blindness Checker

Test any foreground/background color pair against WCAG 2.1 contrast thresholds and preview it under common color-vision deficiencies.

What this does: calculates the WCAG contrast ratio between two colors using the official relative-luminance formula, shows pass/fail badges for AA and AAA text-size thresholds, and simulates the pair under protanopia, deuteranopia, tritanopia and achromatopsia so you can catch readability issues before shipping. Everything runs in your browser; nothing is uploaded.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog, shown at normal body text size.

21.00:1

Contrast ratio (WCAG relative luminance)

AA · Normal
(4.5:1)
—
AA · Large
(3:1)
—
AAA · Normal
(7:1)
—
AAA · Large
(4.5:1)
—

How this pair looks with color-vision deficiencies

Each box simulates your foreground text color rendered on your background color, run through a standard linear-RGB deficiency transform.

Aa
Protanopia
Red-weak
Aa
Deuteranopia
Green-weak
Aa
Tritanopia
Blue-weak
Aa
Achromatopsia
Full color blindness

Frequently asked questions

What WCAG contrast ratio do I need to pass?

WCAG 2.1 requires at least 4.5:1 for normal text and 3:1 for large text (at least 18pt, or 14pt bold) to meet Level AA. Level AAA raises this to 7:1 for normal text and 4.5:1 for large text.

How is the contrast ratio calculated?

The ratio compares the relative luminance of both colors using the WCAG formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's. Relative luminance comes from gamma-corrected, linearized sRGB values weighted 0.2126 red, 0.7152 green, and 0.0722 blue.

Why simulate color blindness separately from the contrast ratio?

A color pair can pass the WCAG contrast ratio and still be hard to distinguish for color-blind users, because the ratio only measures lightness difference, not hue. Simulating protanopia, deuteranopia, and tritanopia shows how the two colors shift toward each other when certain color receptors are missing, even when their luminance contrast is technically fine.