colorkind.

Colorkind / FREE ONLINE TOOLS

Check text and background contrast

Compare two solid colors against WCAG 2.2 AA and AAA text contrast thresholds, with a live reading preview.

On your device · No sign-up

Make every word readable.

03 / CONTRAST
Aa

Good design reads easily.

This is a 14px normal text preview. A useful pairing makes content comfortable to read, as well as pleasing to look at.

The heading above is 24px regular large text.

Reference: WCAG 2.2 ↗

CONTRAST RATIO
15.30:1

Pass/fail uses the full ratio, before display rounding.

AA Normal text≥ 4.5:1✓ Pass
AA Large text≥ 3:1✓ Pass
AAA Normal text≥ 7:1✓ Pass
AAA Large text≥ 4.5:1✓ Pass

A contrast result checks this color pair only. It does not establish accessibility conformance for an entire page.

A LITTLE GUIDANCE

Less effort. Clearer results.

01 / Contrast checker

Check text and background contrast

  1. Set the text color and the background color.
  2. Read the contrast ratio and AA/AAA results immediately.
  3. Swap the colors or adjust them until your pairing meets the required threshold.

A contrast result checks this color pair only. It does not establish accessibility conformance for an entire page.

Open dedicated tool ↗

FAQ

A few useful things to know.

What counts as large text?

WCAG large text is at least 18pt (24 CSS px), or 14pt (about 18.67 CSS px) when bold. The large preview here is 24px regular text.

Which contrast ratios are required?

AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. Pass/fail uses the unrounded ratio.