WCAG Contrast Checker

Enter a text color and a background (hex or the swatches). We use the WCAG 2.1 relative luminance formula—everything stays in your browser.

Exploring how color pairs feel together? Try Symmetry Genius (opens in new tab) for symmetry-focused visuals.

More web utilities: BuildUtilities (opens in new tab)

Accessible email design: Beautiful Inbox (opens in new tab) Supercharged Email (opens in new tab)

Text (foreground)

Background

Sample body text at normal weight.

Large bold heading text

Secondary line for context.

—

contrast ratio

Requirement	Minimum	Result

Large text = 18pt+ regular or 14pt+ bold (about 24px / 18.67px at default sizing). Thresholds follow WCAG 2.1 §1.4.3.

How to use. Set text and background with the color wells or type #RRGGBB hex. The page computes WCAG 2.1 contrast and shows pass/fail for normal and large text. All math stays in your browser.