WCAG Contrast Checker

WCAG 2.1 AA + AAA contrast ratio checker with APCA (WCAG 3 draft) lightness contrast, live preview at every text size, paste any color format, suggest fixes to pass.

Checker Color & Design Updated May 23, 2026

Learn how this works

How to Use

Pick foreground + background colors with the swatch buttons, or paste any color format (hex / rgb() / oklch() / named).
The ratio reads out top-center with pass/fail badges for every WCAG threshold.
Sample text in 4 sizes shows what the pair looks like in real type.
Click "Suggest fix" to nudge one color until the pair passes AA Normal.

Foreground

Background

Presets

—:1

Heading at 32px / 800

Subheading at 22px / 700

Body copy at 16px regular — the quick brown fox jumps over the lazy dog. Pneumonoultramicroscopicsilicovolcanoconiosis.

Small caption at 12.5px — small text typically needs more contrast to remain legible at-a-glance.

Button

APCA Lc — —

FG luminance — relative

BG luminance — relative

Show Work

Enter values to see the step-by-step calculation.

WCAG thresholds

AA normal

≥ 4.5 : 1

Body text under 18pt regular / 14pt bold.

AA large

≥ 3 : 1

18pt+ regular or 14pt+ bold.

AAA normal

≥ 7 : 1

Best-in-class body text contrast.

AAA large

≥ 4.5 : 1

Best-in-class headings.

Non-text UI

≥ 3 : 1

Icons, borders, form input outlines.

APCA Lc

≥ 75 body / 60 large

WCAG 3 draft. Better hue handling than WCAG 2.

About the WCAG Contrast Checker

Whether you are at a desk or on your phone, the WCAG Contrast Checker makes colour and design work easy — and it is completely free. WCAG 2.1 AA + AAA contrast ratio checker with APCA (WCAG 3 draft) lightness contrast, live preview at every text size, paste any color format, suggest fixes to pass.

How it works

Type in what you have, and the answer shows up right away. Change anything and it updates by itself. Everything runs in your browser, so it is fast and nothing you type is sent away.

Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.

Frequently Asked Questions

WCAG 2.1 ratio thresholds?

AA Normal 4.5:1 — AA Large 3:1 — AAA Normal 7:1 — AAA Large 4.5:1 — Non-text UI 3:1.

What is "large" text?

18pt regular or 14pt bold (about 24px or 18.66px CSS).

What is APCA?

Accessible Perceptual Contrast Algorithm — proposed for WCAG 3. Range −108 to +106. Sign indicates dark-on-light vs light-on-dark. Practical thresholds: ≥75 for body text, ≥60 for large text, ≥45 for non-text UI.

Why both WCAG 2 and APCA?

WCAG 2 is the legal standard but its luminance formula is known to over- or under-rate certain hue pairs (especially blues). APCA models real screen contrast better — but is not yet final. Pass both if you can.

How do I use the WCAG Contrast Checker?

Just type your numbers. The answer shows up right away — there is no button to press. Change anything and it updates by itself.

Is it free? Does it work without internet?

Yes to both. It is free with no sign-up, and once the page has loaded it keeps working even with no internet.

Where does my data go?

Nowhere — every calculation runs on your own device. Nothing you enter is uploaded, logged, or stored.

Common Use Cases

UI accessibility review

Spot-check headings, body copy, buttons, and disabled states against AA / AAA.

Brand colour guidelines

Verify every primary/secondary/accent combo meets your accessibility floor.

Dark-mode design

APCA reveals where WCAG 2 lies about dark theme contrast.

Last updated: May 23, 2026