WCAG 2.2 contrast lab

Check any text and background color pair.

Enter two opaque sRGB colors to calculate their contrast ratio, check WCAG AA and AAA text thresholds, preview the pair without hiding a failed result, and copy the exact CSS.

01 / Contrast ratio

One ratio, four text thresholds.

WCAG ratios are threshold values: do not round a failing result up. Large text means at least 24 CSS px at normal weight, or about 18.7 CSS px when bold.

16.98:1

Pass

AA · normal text

Requires 4.5:1

Pass

AA · large text

Requires 3:1

Pass

AAA · normal text

Requires 7:1

Pass

AAA · large text

Requires 4.5:1

Implementation

Carry the checked pair into CSS.

The copied custom properties preserve the exact opaque values used by this calculation. Test every real state and surface where the pair appears.

--text-color: #111827;
--background-color: #F9FAFB;
color: var(--text-color);
background-color: var(--background-color);

Published criteria

What this checker proves—and what it does not.

The calculation follows WCAG 2.2 relative luminance and contrast-ratio rules for sRGB colors. A numerical pass is evidence for this pair, not automatic certification of a page or product.

1.4.3

Minimum text contrast

Normal text needs at least 4.5:1; large text needs at least 3:1 at Level AA.

Read the W3C guidance

1.4.6

Enhanced text contrast

Normal text needs at least 7:1; large text needs at least 4.5:1 at Level AAA.

Read the W3C guidance

1.4.11

Non-text contrast

Essential controls, states, and graphical objects generally need 3:1 against adjacent colors, but their actual boundaries must be tested in context.

Read the W3C guidance