Color Contrast Checker

Check any text/background combination against WCAG 2.1 contrast ratios. Drop in your brand colors, see live previews, and confirm you pass AA before shipping.

Foreground (text)

Background

Contrast Ratio

17.06:1

Large text sample (24px bold)

Body text sample (16px). The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Small text sample (14px). Subdued copy, captions, footer notes.

AA · normal text (4.5:1)

AA · large text (3:1)

AAA · normal text (7:1)

AAA · large text (4.5:1)

AA · UI components (3:1)

Need contrast fixed across your whole site automatically? OnlyEnable's widget includes a high-contrast profile that overrides every element.

What the WCAG ratios mean

WCAG 2.1 sets a minimum contrast ratio of 4.5:1 for body text (Level AA, criterion 1.4.3) and 3:1 for large text — defined as 18pt+ regular or 14pt+ bold. The stricter AAA level (1.4.6) requires 7:1 for body and 4.5:1 for large text.

Low contrast is the most common WCAG failure on the web. It excludes low-vision users, older adults, colorblind users, and anyone reading on a screen in bright sunlight. A passing ratio is a one-line CSS fix.