Calculator Converter
Design

Contrast checker

Check the WCAG contrast ratio of two colours.

Loading tool…

  1. 1 Set the text colour.
  2. 2 Set the background colour.
  3. 3 Read the ratio and the AA and AAA marks.
  4. 4 Adjust either colour until the text you care about passes.

How it works

Readable text needs enough contrast with its background. Enter a foreground and a background as HEX. The ratio uses the WCAG relative luminance formula. The page marks AA and AAA for normal text (4.5:1 and 7:1) and for large text (3:1 and 4.5:1). Large text, in WCAG, is 18pt or 14pt bold. A pass here does not cover colour-blindness or non-text icons.

(L1 + 0.05) / (L2 + 0.05), where L is relative luminance.

Frequently asked questions

Which level should I aim for?

AA is the usual target for body text. AAA is stricter and not always possible for brand colours.

Does the order of the colours matter?

No. The ratio is the same if you swap text and background. The preview still shows them in the roles you chose.

See all

CSS gradient generator

Build a two-colour linear gradient and copy the CSS.

Box shadow generator

Adjust a CSS box-shadow and copy the declaration.