What contrast ratio is required for WCAG AA?

Normal body text needs at least 4.5:1 against its background; large text (roughly 18px+ regular or 14px+ bold) needs 3:1. UI graphics and focus rings use the 3:1 threshold.

AAA tightens body text to 7:1 and large text to 4.5:1 — use when regulatory or enterprise accessibility baselines demand it.

Does this measure relative or absolute colour?

WCAG contrast uses defined relative luminance in sRGB — the same math browsers expose in accessibility audits.

Can semi-transparent colours pass?

Effective contrast depends on what appears behind semi-transparent layers. Sample the composed result exactly as users see it, not each layer in isolation.

Why does my brand colour fail AA?

Vivid mid-tones often sit near the same lightness as white or grey text. Darken text, lighten background, or provide a solid text container behind copy.

Check the lowest-contrast point along the gradient behind your text, especially on mobile where text reflows.

Is this a legal guarantee of compliance?

The tool does the standard ratio math — you still need holistic testing (focus, motion, semantics) for full audit sign-off.

Can I test non-text UI?

Use the same pairs for icon strokes, chip borders, and chart lines where they convey meaning without text labels.

WCAG Contrast Checker

Color Live

Check WCAG AA and AAA contrast for any two colors.

About this tool

WCAG Contrast Checker — Check WCAG AA and AAA contrast for any two colors. Free, fast and private. Runs entirely in your browser at Quick Calci Tools.

Examples

Common scenarios for the WCAG Contrast Checker.

Black on white

fg: #000000
bg: #FFFFFF

21:1 — passes AAA for both normal and large text.

Mid-grey on white

fg: #888888
bg: #FFFFFF

3.54:1 — passes AA large text only.

Who uses the WCAG Contrast Checker?

Common scenarios and audiences for this tool.

Frontend engineers

Validate button and link colours from Figma before merging theme PRs.

Content designers

Ensure blog typography on tinted section backgrounds still passes enterprise a11y gates.

Data viz specialists

Prove chart label colours remain readable on gradient fills.

E-commerce teams

Check sale badges and promo banners on photo backgrounds.

Educators

Teach students numeric contrast thresholds with live feedback.

Frequently asked questions

Everything you need to know about the WCAG Contrast Checker.