AccessibilityAlert

Color contrast checker

Check two colours against WCAG 2.2 (AA and AAA, normal and large text) and APCA. Everything runs in your browser; nothing is uploaded.

Colours

Text colour

Pick

Background colour

Pick

WCAG 2.2 contrast ratio

4.54:1

AA normal textPass

AA large textPass

AAA normal textFail

AAA large textPass

APCA Lc 71.6

Target

Large text: 24px bold heading

Normal text: the quick brown fox jumps over the lazy dog. Body copy is what most people read.

Small text: 14px captions and footnotes are the first thing to become unreadable.

How this is calculated

WCAG 2.x contrast ratio: (L1 + 0.05) / (L2 + 0.05) using sRGB relative luminance. Ratios are not rounded up, so 4.49:1 fails 4.5:1.
Large text is at least 24px, or at least 18.66px and bold. AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1.
APCA Lc is computed with the APCA-W3 0.0.98G-4g constants. It is shown for guidance; WCAG 2.2 uses the ratio above. Rough guide: Lc 75+ body text, 60+ content text, 45+ large headings, 30+ minimum for non-text.
"Suggest" keeps the text colour's hue and changes only its lightness (OKLCH), picking whichever of lighter or darker is the smaller change.

Scan a page for contrast failures

Paste a URL. We open the page in a real browser, measure each piece of text against the pixels actually behind it, photos and gradients included, and show you the first failures.

Early access

Get early access to AccessibilityAlert: it checks every page of your site after each change, including text over images and gradients that other scanners leave for manual review.