WCAG Large Text Contrast Rules

"Large text" gets a relaxed contrast threshold under WCAG — but the definition is more specific than most designers realize.

Last updated: May 2026

At a glance

Large text — regular weight: 18 point ≈ 24 CSS pixels
Large text — bold weight: 14 point ≈ 18.66 CSS pixels
AA threshold for large text: 3:1
AAA threshold for large text: 4.5:1
Anchor: Rendered size after CSS, not declared size

WCAG’s large-text carve-out is one of the most misunderstood parts of the contrast standard. It allows a relaxed ratio (3:1 for AA, 4.5:1 for AAA) — but the definition of "large" is precise, anchored to point sizes that don’t map cleanly onto modern CSS.

Why point sizes?

WCAG predates the CSS pixel as a typographic unit and uses the print-typography point (1/72 inch) as its reference. Browser default 1pt ≈ 1.333 CSS px — which is why 18pt becomes 24 CSS px and 14pt becomes 18.66 CSS px.

In practice this means: text that is exactly 18 px (Tailwind text-lg, Material body-1) is NOT large under WCAG. It must hit the full 4.5:1 ratio.

Bold weight matters

A bold 14-pt (18.66 px) line counts as large; a regular 14-pt line does not. The reasoning is that bold strokes carry more pixel mass per glyph, improving legibility at lower contrast.

But: "bold" in WCAG means font-weight 700 or higher. Variable-font weights below 700 do not qualify, even if they look thicker than a typical regular weight.

Frequently asked questions

Is `text-xl` large text in Tailwind?

Yes — Tailwind’s text-xl is 20px regular. That’s slightly below the 24px (18pt) threshold for *regular weight*. If you bold it (font-weight 700), 20px is well above the 18.66px (14pt bold) threshold and counts as large. Without bold, you need the full 4.5:1 ratio.

What about responsive text that scales?

Use the rendered size at the smallest viewport where the text appears. If your clamp() formula renders 16px on mobile and 24px on desktop, the mobile rendering is the binding case — it must hit 4.5:1 because at 16 px it is not "large."

Does headings always count as large?

No — headings are normal text under WCAG unless they actually render at 18pt+ (or 14pt+ bold). A <h3> styled at 16 px is not large, even though semantically it’s a heading.