Tool · Contrast checker

WCAG contrast checker.

Test foreground and background colors, read the contrast ratio, and verify AA, AAA, and large-text thresholds before you ship.

Foreground

Text or symbol colour

Background

Surface behind the foreground

Quick presets:

Large display · 32px

The quick brown fox jumps over the lazy dog.

Body · 17px

Body copy at the size your reader actually meets. If this paragraph is uncomfortable to read here, it will be unreadable for someone with low vision, in glare, or on a budget screen.

Caption · 14px

Small print. Use this size only when the AA threshold is comfortably exceeded — 4.5:1 is a floor, not a target.

Primary actionSecondary

Contrast ratio

16.14:1

Exceeds AAA for body text.

  • AA normal text

    Body copy, default UI

    Pass

  • AA large text

    18pt+ or 14pt+ bold

    Pass

  • AAA normal text

    Load-bearing copy

    Pass

  • AAA large text

    Long-form display

    Pass

  • UI components

    Non-text contrast

    Pass

The thresholds, briefly.

AA — body text (≥ 4.5:1). The default. If a pair passes nothing else, it should pass this. Below 4.5:1 your body copy is illegible for a non-trivial fraction of readers.

AA — large text (≥ 3:1). Large text is 18pt regular or 14pt bold and above (roughly 24px regular / 18.66px bold). Pulled at this size because larger letterforms are inherently more legible.

AAA — body text (≥ 7:1). The gold standard. Aim for AAA on anything load-bearing — primary CTAs, error states, anything where misread = data loss.

AAA — large text (≥ 4.5:1). The AAA equivalent of the large-text relaxation. Used for long-form display type.

Frequently asked questions.

What contrast ratio passes WCAG AA?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text.
What contrast ratio passes WCAG AAA?
WCAG AAA requires at least 7:1 for normal text and 4.5:1 for large text.
Can I test both text and background colors?
Yes. Enter or pick a foreground color and a background color to calculate the contrast ratio and preview the result.

How to check color contrast.

  1. Step 1

    Enter the foreground color

    Paste or pick the text color you want to test.

  2. Step 2

    Enter the background color

    Paste or pick the surface color behind the text.

  3. Step 3

    Read the WCAG result

    Use the AA, AAA, and large-text verdicts to choose an accessible pair.