Skip to content
DDevToolery

Reading the contrast figures

What the AA and AAA labels in the colour converter mean.

The colour converter shows your colour against white and black, with a contrast ratio for each.

The thresholds

  • 4.5:1 — AA for normal body text. The usual minimum to aim for.
  • 3:1 — AA for large text, meaning 18pt, or 14pt bold and above. Also the minimum for interface components and graphics.
  • 7:1 — AAA for normal text. Worth targeting for long-form reading.

How the ratio is calculated

From the relative luminance of the two colours, per the WCAG 2 formula. It ranges from 1:1 for identical colours to 21:1 for black on white.

What it does not capture

The WCAG 2 formula is known to be imperfect, particularly for light text on dark backgrounds, where it can pass combinations that are hard to read and fail ones that are fine. Treat it as a floor to clear rather than a guarantee, and look at the preview.

Beyond contrast

Contrast is one part of colour accessibility. Never rely on colour alone to convey meaning — pair it with a label, a shape or an icon, so the information survives for someone who cannot distinguish the hues.