WCAG 2.2 Color Contrast Checker

For level AA, 4.5:1 for normal text and 3:1 for large text (1.4.3), and 3:1 for UI component boundaries, states and meaningful graphics (1.4.11). Level AAA raises text to 7:1 and large text to 4.5:1 (1.4.6). The thresholds did not change from WCAG 2.1 — what 2.2 added are new criteria such as focus appearance and target size, which have their own tools here. For common colour pairs, see the contrast reports.

At least 18 point (24 CSS px) regular, or 14 point (about 18.66 CSS px) bold. Below that, the 4.5:1 normal-text threshold applies, however heavy the font looks.

WCAG thresholds are exact: a ratio of 4.499:1 does not meet 4.5:1. Some tools round to one decimal and show it as a pass. This checker truncates instead, so a pair it shows as passing really does pass.

A translucent foreground is flattened onto its background first, because that blended colour is what reaches the eye and what WCAG measures. A translucent background is flattened onto white, the browser default.

The suggestion keeps your colour's hue and chroma in the OKLCH colour space and changes only lightness, searching both darker and lighter, then returns whichever passing colour moved least. Your brand blue stays recognisably blue rather than becoming a generic navy.

Contrast is about lightness difference, which colour-vision deficiencies mostly preserve, so a passing pair is usually still legible. Where colour alone carries meaning — red for errors, green for success — you also need 1.4.1 Use of Color. The colour-blindness previews show what those users actually see.