Work & study
Runs on your device

Contrast Checker

Check whether text and interface colours meet the WCAG 2.2 contrast minimums.

Type any CSS colour: #hex, rgb(), hsl() or a name like navy. A translucent text colour is blended onto the background first.

Nearest passing colours

Same hue, smallest change
Contrast ratio —

Preview

Large heading, 28 px

Body text at 16 px. Most people read this size every day, so it needs 4.5 to 1 to meet AA.

Small print at 13 px is harder still. Captions, footnotes and form hints often fail first.

Every lightness of this hue

Click one to use it
AAA 7:1 or moreAA 4.5:1 or moreA+ 3:1, large text and icons only

How this is calculated

WCAG compares the relative luminance of the two colours, a measure of how bright each looks:

channel c = value ÷ 255 linear c ≤ 0.04045 ? c ÷ 12.92 : ((c + 0.055) ÷ 1.055)^2.4 L = 0.2126 R + 0.7152 G + 0.0722 B ratio = (L lighter + 0.05) ÷ (L darker + 0.05)

The ratio runs from 1:1 (no contrast) to 21:1 (black on white). It is shown cut off at two decimals, never rounded up, because WCAG treats 4.499 as a fail.

Minimums

  • AA, body text: 4.5:1 (success criterion 1.4.3).
  • AA, large text: 3:1. Large means at least 18 pt (24 px), or 14 pt (about 18.66 px) in bold.
  • AAA: 7:1 for body text and 4.5:1 for large text (1.4.6).
  • Icons, borders and form controls: 3:1 against what is next to them (1.4.11).

Logos and purely decorative text are exempt. Suggested fixes keep the hue and saturation and move only the lightness, by the smallest step that passes.