Color contrast checker

WCAG contrast ratio, AA and AAA.

Large text, 24 pixels

Bold text at 18.66 pixels (14pt) counts as large too

Normal body text at 16 pixels. Pack my box with five dozen liquor jugs.

Small print at 13 pixels is harder to read than the ratio suggests.

ButtonText field

4.83:1

  • PassAA Normal textBody text under 24px (18pt), or under 18.66px (14pt) when bold4.5:1
  • PassAA Large textAt least 24px (18pt), or 18.66px (14pt) bold3:1
  • FailAAA Normal textThe enhanced level for body text7:1
  • PassAAA Large textThe enhanced level for large text4.5:1
  • PassAA UI parts and graphicsIcons, input borders, focus rings and chart lines (WCAG 1.4.11)3:1
Suggest colours that reach

Your last two colours are saved on this device.

Runs in your browser. Nothing uploaded.

How to check colour contrast

  1. Type or paste the Text colour and Background colour as hex, rgb(), hsl() or a CSS name, or click a swatch to pick one. The swap button exchanges them.
  2. Read the contrast ratio and the pass or fail result for each WCAG level. The preview shows real text, a button and an icon in your colours.
  3. If a level fails, choose the level you need under Suggest colours that reach and click a suggestion to use the closest lighter or darker shade that passes.

How the suggestions work

When a pair fails, the checker keeps the hue and saturation of your colour and only makes it lighter or darker until the ratio reaches the level you picked. It offers the closest such shade for the text and for the background, measured by how different it looks (the CIEDE2000 colour difference), so the brand colour you started with changes as little as possible. Sometimes only one direction works: a mid grey on white can only get darker.

What the WCAG levels mean

WCAG (the Web Content Accessibility Guidelines) is the standard most accessibility laws and audits point to. Success criterion 1.4.3 sets the AA minimums for text, 1.4.6 sets the stricter AAA ones, and 1.4.11 covers non-text parts such as icons and form borders. AA is the usual target for websites and apps; AAA is worth aiming for in long reading text.

Contrast is not the only thing that makes text readable. Thin fonts, small sizes and busy background images all make text harder to read than its ratio suggests, so check real screens too.

Text in images, logos and disabled buttons

WCAG makes exceptions. Logos and brand names have no contrast requirement, and neither does text in a disabled control, text that is pure decoration, or text that happens to appear in a photo with lots of other content, like a street sign. A banner or button saved as a picture of text is not exempt: it needs the same ratio as real text, so test the colours where the words sit.