What contrast ratio does WCAG 2.1 require?

AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Non-text UI components and graphical objects need 3:1 (SC 1.4.11).

What counts as 'large text' under WCAG?

18pt (24px) regular weight or 14pt (~18.66px) bold. Below those thresholds the normal-text requirement (4.5:1 AA, 7:1 AAA) applies. Note that 'pt' here is CSS pt, where 1pt ≈ 1.333px.

What is APCA Lc and should I use it?

APCA (Accessible Perceptual Contrast Algorithm) is the contrast model under consideration for WCAG 3. Lc is a perceptually-uniform contrast value, signed by polarity (light on dark vs dark on light). Use it as a forward-looking signal, but WCAG 2.1 ratios remain the legal compliance target today.

Why does the same pair score differently in different tools?

Most discrepancies come from sRGB linearization or rounding. We use the WCAG-defined formula (the 0.03928 break with the 2.4 curve) and unclipped channel values. Some older tools use shortcut approximations — our number matches the W3C reference implementation.

Does contrast guarantee my design is accessible?

No — contrast is one criterion of many. Color must not be the only signal (SC 1.4.1), focus indicators need their own contrast (SC 1.4.11), and text must reflow at 200% zoom (SC 1.4.10). Run the contrast checker alongside a broader audit.

Can I check contrast for gradients or images?

Not directly — WCAG ratios are pair-wise. For text on a gradient, score against the worst-case point under the text. For text on a photo, add a solid scrim or test against the darkest pixel cluster behind the glyphs.

Accessibility

WCAG Contrast Checker

Score any foreground/background pair against WCAG 2.1 (AA, AAA) and the newer APCA Lc model. Live ratio, large-text rules, non-text 3:1 check, and one-click swap.

WCAG 2.1 ratio scored against the 4.5:1, 3:1 and 7:1 thresholds
APCA Lc preview for the next-gen perceptual contrast model
Large-text (18pt / 14pt bold) and non-text (UI components) rules
Live swap of foreground and background, plus colorblind-safe hint

Direct answer

Type a foreground and background HEX. The checker returns the luminance contrast ratio per WCAG 2.1, the pass/fail badge for AA (4.5:1 normal text, 3:1 large) and AAA (7:1 normal, 4.5:1 large), and an APCA Lc reading you can use to compare to the newer model proposed for WCAG 3.

Foreground (text)

Background

Ratio

16.12 : 1

AA Normal

AA Large

AAA Normal

AAA Large

Preview

The quick brown fox

Body text — the kind that should clear AA at 4.5:1 minimum. WCAG 2.1 specifies different ratios for normal and large text.

Small caption text — needs the highest ratio to remain legible.

When this saves you time

Real workflows where wcag contrast checker replaces tedious manual work or an in-app subscription tool.

Audit

Spot-check buttons before code review

Paste the button background and label HEX. If the pair fails 4.5:1 you fix it before the PR ships — not after a screen reader user reports it.

Brand

Validate a brand palette against WCAG AA

Run every brand color against your two text colors. The matrix surfaces which pairs work as text backgrounds and which only work for decorative surfaces.

Dark mode

Check dark-theme variants

Dark themes often regress: a #FFFFFF on #1F2937 pair scores ~16:1 (AAA), but the same text on #374151 drops to ~11:1 — still safe. The checker makes the trade-offs visible.

UI components

Verify non-text contrast (SC 1.4.11)

Input borders, focus rings, icons-only buttons all need 3:1 against adjacent colors. The checker shows the SC 1.4.11 pass-fail directly.

Pre-flight marketing email colors

Outlook strips many styles, so brand colors render on near-white. Confirm 4.5:1 against #FFFFFF before designing the layout — avoids the inevitable rebuild.

APCA

Compare WCAG 2.1 to APCA Lc

APCA is a perceptual contrast model that treats light-on-dark and dark-on-light asymmetrically. The dual readout helps you future-proof when WCAG 3 lands.

How it works

The methodology — every transformation documented so the output is reproducible.

Linearize and compute luminance

Each sRGB channel is gamma-decoded (the 2.4 curve with the 0.03928 break) and weighted 0.2126·R + 0.7152·G + 0.0722·B to produce relative luminance L.

Apply the WCAG ratio formula

Contrast ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. The ratio runs from 1:1 (identical) to 21:1 (pure black on pure white).

Compare against AA / AAA thresholds

Normal text needs 4.5:1 AA / 7:1 AAA. Large text (≥18pt or ≥14pt bold) drops to 3:1 / 4.5:1. Non-text UI components (borders, icons) need 3:1.

Compute APCA Lc in parallel

APCA uses a different luminance estimator (Y) and a non-linear contrast formula tuned to spatial frequency. The result is a signed Lc value (range roughly -108 to +106) that better predicts real readability.

Worked examples

Input	Result	Notes
#FFFFFF on #1F2937 (slate-800)	16.1:1 — AAA pass	Common dark-UI body text. Plenty of headroom for icons too.
#FFFFFF on #2563EB (blue-600)	5.17:1 — AA pass (normal), AAA fail	Typical primary button. Use for buttons, not body text headings under 18pt.
#6B7280 on #FFFFFF (gray-500)	4.6:1 — AA pass for normal text	The lightest gray that still passes 4.5:1 on white. Anything lighter is large-text only.
#FBBF24 on #FFFFFF (amber-400)	1.81:1 — fails everything	Yellow on white is a classic accessibility trap. Reserve for decorative use behind a dark text overlay.
#0F172A on #FFFFFF	19.6:1 — AAA pass	Almost-black on white — the upper bound of practical UI contrast.

Common mistakes to avoid

Trusting screenshots over the math

Two colors that look fine on a calibrated monitor can fail 4.5:1. Always score the HEX, never eyeball — especially across dark mode.

Forgetting the large-text loophole

Designers sometimes ship body copy in a thin 14px weight that fails AA, citing 'it's a heading'. AA's 3:1 only applies at 18pt regular or 14pt bold — anything smaller needs the full 4.5:1.

Ignoring non-text contrast

WCAG 2.1 SC 1.4.11 requires 3:1 for UI components and graphical objects. A 1px gray border that fails 3:1 against the surrounding background is non-compliant even if the label inside is high-contrast.

Treating APCA as a drop-in replacement

APCA Lc is not the WCAG 2.1 ratio. The thresholds, polarity, and interpretation differ. Use APCA as a directional second opinion — score against WCAG 2.1 for legal compliance.

Frequently Asked Questions

Where the WCAG 2.1 thresholds come from

The 4.5:1 number was not chosen arbitrarily. It reflects the estimated contrast loss for a user with 20/40 vision (the bottom of the “normal” range) at typical body-text sizes. The ratio is computed against relative luminance, which is what the eye actually responds to, rather than RGB channel values directly. Pure black on pure white scores 21:1; identical colors score 1:1. Most usable text pairs land between 4.5:1 and 16:1.

The 3:1 threshold for large text comes from research showing that larger glyphs are easier to resolve at lower contrast — the spatial-frequency advantage offsets some of the luminance loss. The same 3:1 figure governs non-text contrast (SC 1.4.11) on the assumption that UI shapes are typically larger than body type and do not need to be readable as individual characters.

WCAG 2.1 vs APCA: what's actually different

WCAG 2.1’s ratio is symmetric — swap foreground and background and the number is unchanged. APCA is polarity-aware: dark text on light backgrounds (positive Lc) needs different thresholds than light text on dark (negative Lc). APCA also weights spatial frequency: thin glyphs need more contrast than chunky ones, which the 2.1 ratio ignores. For most production work, scoring against both gives you a today-and-tomorrow view: ship the WCAG 2.1 pass for compliance, keep an eye on APCA for the perceptually-correct read.

Putting contrast in the design system

The checker is most useful when wired into your token pipeline. Build the palette in the palette generator, run each foreground/background pair through this tool, and freeze the passing pairs as semantic tokens (text-on-primary, text-on-surface, border-default). Then export them via the design token generator so the contrast guarantees travel with the tokens instead of living in a spreadsheet.

WCAG Contrast Checker