Checking whether your brand colour on a white card meets accessibility standards. Picking a button text colour that passes AA against a brand-coloured background. Auditing a design system token by token before shipping. Justifying a colour-change request to a stakeholder with a concrete pass/fail verdict. Testing what your users with reduced contrast preferences will actually see.

Normal text (under 18pt / 14pt bold): 4.5:1 for AA, 7:1 for AAA. Large text (≥18pt or ≥14pt bold): 3:1 for AA, 4.5:1 for AAA. UI components & graphics (icons, focus rings, form borders, chart elements that convey info): 3:1 for AA (WCAG 2.1 §1.4.11). No AAA tier.

"Large text" is bigger than you think. 18pt is roughly 24px. 14pt bold is roughly 19px bold. Body copy at 16px is not large text — it needs the 4.5:1 threshold. Light text on a busy photo will fail. The contrast ratio is between specific pixels — overlay a dark gradient or use a solid panel to give the text a controlled background. Anti-aliasing softens contrast. 4.5:1 is the floor, not a goal. Comfortable reading usually wants 7:1 or better, especially for body copy. Hover and focus states count. If your button passes AA at rest but fails on hover, that's a real accessibility bug. WCAG 2.1 vs APCA. The new APCA (Accessible Perceptual Contrast Algorithm), proposed for WCAG 3, gives different and arguably better numbers — but WCAG 2.1 is the legal standard most jurisdictions still reference. Use this tool's numbers when meeting EN 301 549, ADA, or AA-conformance claims. Don't pad with transparency. A 50% alpha foreground over a known background has a different effective contrast — compute against the actual rendered colour, not the original.

WCAG Contrast Checker

Check the contrast ratio between two colors. Pass/fail verdict for WCAG AA and AAA at every text size.

Foreground

Background

Result

Aa — Large text 24px / 18px bold

Aa — Normal text 16px

Aa — Small text 12px

What is this for?

WCAG (Web Content Accessibility Guidelines) defines a minimum contrast ratio between text and its background so people with low vision, colour-blindness, or in glare conditions can still read it. This tool computes that ratio (1:1 = identical, 21:1 = pure black on pure white) and tells you whether your colour pair passes WCAG 2.1 Level AA or AAA, separately for normal text, large text, and UI components. The maths follows the W3C luminance formula exactly.

When to use it

Checking whether your brand colour on a white card meets accessibility standards.
Picking a button text colour that passes AA against a brand-coloured background.
Auditing a design system token by token before shipping.
Justifying a colour-change request to a stakeholder with a concrete pass/fail verdict.
Testing what your users with reduced contrast preferences will actually see.

The thresholds

Normal text (under 18pt / 14pt bold): 4.5:1 for AA, 7:1 for AAA.
Large text (≥18pt or ≥14pt bold): 3:1 for AA, 4.5:1 for AAA.
UI components & graphics (icons, focus rings, form borders, chart elements that convey info): 3:1 for AA (WCAG 2.1 §1.4.11). No AAA tier.

Common gotchas

"Large text" is bigger than you think. 18pt is roughly 24px. 14pt bold is roughly 19px bold. Body copy at 16px is not large text — it needs the 4.5:1 threshold.
Light text on a busy photo will fail. The contrast ratio is between specific pixels — overlay a dark gradient or use a solid panel to give the text a controlled background.
Anti-aliasing softens contrast. 4.5:1 is the floor, not a goal. Comfortable reading usually wants 7:1 or better, especially for body copy.
Hover and focus states count. If your button passes AA at rest but fails on hover, that's a real accessibility bug.
WCAG 2.1 vs APCA. The new APCA (Accessible Perceptual Contrast Algorithm), proposed for WCAG 3, gives different and arguably better numbers — but WCAG 2.1 is the legal standard most jurisdictions still reference. Use this tool's numbers when meeting EN 301 549, ADA, or AA-conformance claims.
Don't pad with transparency. A 50% alpha foreground over a known background has a different effective contrast — compute against the actual rendered colour, not the original.