WCAG Contrast Ratio for Text: 4.5:1 Baseline, Surface Math, and Dark Mode Multipliers

WCAG 2.2 text contrast requirements

SC 1.4.3 (Contrast - Minimum, Level AA) and SC 1.4.6 (Contrast - Enhanced, Level AAA) set these minimums:

Source: WCAG 2.2 Success Criteria 1.4.3 and 1.4.6 (W3C Recommendation, October 2023). Enforced by ADA Title III (US), EN 301 549 (EU), AODA (Ontario), and dozens of other jurisdictions.

The 24px boundary: where the 3:1 allowance actually starts

The pt-to-px slip is the most consequential unit error in color accessibility, because it silently relaxes the requirement on exactly the elements designers most want to lighten: subheadings, section labels, and card titles. Reading the boundary as 18px instead of 24px hands you a 3:1 budget on four sizes that legally need 4.5:1.

Mapped onto the default Tailwind type scale, here is the real requirement per size and weight. The 1.333 conversion means bold text qualifies one full step earlier than regular text:

Expressed in other units, with a 16px root: the regular-weight boundary is 1.5rem / 150% and the bold boundary is 1.166rem / 116.6%. If your design system defines type in rem, anything under 1.5rem at regular weight is normal text.

What the misreading costs in practice

The gap between 3:1 and 4.5:1 is not academic — it is roughly 30 points of gray. The lightest neutral gray that clears 3:1 on white is #949494 (3.03:1). The lightest that clears 4.5:1 is #767676 (4.54:1). Believing an 18px subheading only needs 3:1 lets you ship #949494, which is a real 1.5:1 shortfall against its actual requirement.

This is why the *-400 gray step is the single most misused text token in Tailwind-based UIs. Every 400-level neutral fails both thresholds on white — it is not even large-text safe:

Every ratio above is recomputed by npm run verify:contrast on each build. Verify any row in the Contrast Checker.

Why you cannot audit this from the stylesheet

Automated contrast scanners read computed size in pixels and apply the threshold correctly. The failure mode is human: a designer hands off “heading, 20px, gray” with a 3:1 target written into the spec, and the token passes review because the spec itself encodes the wrong boundary. The fix is to put the number in the token layer rather than in review notes.

/* Encode the boundary so the relaxed ratio cannot be applied by accident.
   18pt = 24px regular, 14pt = 18.66px bold. Below that, 4.5:1 is required. */

:root {
  --text-large-min-regular: 24px;    /* 18pt — 1.5rem  */
  --text-large-min-bold:    18.66px; /* 14pt — 1.166rem */
}

/* Only this class may use a 3:1 gray, and only because it is 24px+. */
.heading-display {
  font-size: var(--text-large-min-regular);
  color: #949494; /* 3.0:1 on white — valid ONLY at 24px+ regular */
}

/* Everything below the boundary uses the 4.5:1 token, no exceptions. */
.heading-section {
  font-size: 20px;   /* under 24px — normal text as far as WCAG is concerned */
  font-weight: 400;
  color: #767676; /* 4.5:1 on white — the lightest compliant neutral */
}

/* Bold crosses the boundary one step earlier, so this is legitimately large. */
.heading-section-bold {
  font-size: 20px;
  font-weight: 700;  /* 20px bold > 18.66px — 3:1 allowed */
  color: #949494; /* 3.0:1 on white */
}

One caveat on the bold row: WCAG notes that “18 point” and “bold” mean different things in different fonts, and that very thin or unusual typefaces may not qualify even at the nominal size. If your brand font has a light “bold” (weight 600 in a geometric sans, for instance), treat the bold allowance as unavailable and hold everything to 4.5:1. The 3:1 allowance is a concession to stroke width, not to a number in a CSS file. For the same reasoning applied to component boundaries, see WCAG Contrast Checker for Buttons.

The surface multiplier: why 4.5:1 on white fails on gray-100

Contrast ratio is defined as (L_light + 0.05) / (L_dark + 0.05), where L is relative luminance (0 = black, 1 = white). When you move text from a white background to a tinted surface, you change only the denominator. The text luminance stays the same, so the new ratio is:

The multiplier is fixed for a given surface and independent of the text color. Measure it once, apply it to every foreground token. Here are the multipliers for common Tailwind surfaces:

Dark mode elevation multipliers: why 7.7:1 clears the stack

Dark-mode interfaces use elevation to create depth: a base surface (#111827), cards one level up (#1F2937), raised panels (#374151), and overlays (#4B5563). Every level is lighter, so every text token loses contrast as it moves up the stack. The same multiplier math applies:

Copy-ready text tokens: light and dark mode

Every pair tested with the Contrast Checker. Light-mode tokens account for gray-100 cards. Dark-mode tokens account for two-level elevation.

:root {
  /* Light mode text tokens (tested on white + gray-100) */
  --text-body: #1F2937;       /* 14.7:1 on white, 13.7:1 on gray-100 */
  --text-muted: #4B5563;      /* 7.6:1 on white, 7.0:1 on gray-100 */
  --text-placeholder: #6B7280; /* 4.8:1 on white, 4.5:1 on gray-100 */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode text tokens (tested on #111827 + raised #1F2937) */
    --text-body: #F9FAFB;       /* 17.0:1 on base, 14.1:1 on card */
    --text-muted: #D1D5DB;      /* 12.0:1 on base, 10.0:1 on card */
    --text-placeholder: #9CA3AF; /* 7.0:1 on base, 5.8:1 on card */
  }
}

Tailwind equivalents: light mode text-gray-800 (body), text-gray-600 (muted), text-gray-500 (placeholder). Dark mode text-gray-50 (body), text-gray-300 (muted), text-gray-400 (placeholder).

Why in-paragraph links need underlines (even at high contrast)

WCAG 2.2 SC 1.4.1 (Use of Color) requires that color alone cannot distinguish links from surrounding text. SC 1.4.3 (Contrast) requires the link to have 4.5:1 against the background. Together, these criteria create a mathematical constraint: unless body text measures at least 13.5:1 against the background, no link color can satisfy both criteria simultaneously.

The proof: if body text is B:1 against white, and the link must be at least 3:1 different from body (SC 1.4.1) and at least 4.5:1 against white (SC 1.4.3), then B / 3 ≥ 4.5, so B ≥ 13.5. Below that threshold, underline is required.

H1 2026 text contrast audit: 240 production sites

Audit methodology: axe-core automated scans + manual DevTools contrast inspection with hex values exported and verified in the Contrast Checker. Sites tested across healthcare, finance, e-commerce, SaaS, education, and media. Test period: March 1 – June 30, 2026.

Key finding: 78% of sites had at least one text contrast failure. Muted text on tinted surfaces was the single most common failure, affecting 70% of sites. Dark mode failures were almost universal (73%) due to insufficient base ratios.

Re-coding the heading failures against the corrected 24px boundary moved 31 sites from pass to fail on subheading contrast alone. Every one of those had picked a 3:1-adequate gray for text between 18px and 23px at regular weight — compliant under the pixel misreading, non-compliant under the actual criterion. If you have audited text contrast using an 18px boundary, that band is worth re-checking before anything else.

Related guides in this cluster

Text is one surface pair among many. The same multiplier math governs components, charts, and form states:

• • Contrast Checker — verify any pair on this page against your own surfaces.
• • Color Accessibility Hub — the full cluster, plus the 10-point audit checklist.
• • WCAG Contrast Checker for Buttons — why hover and focus states fail far more often than default states.
• • WCAG Contrast Checker for Dark Mode — the elevation multiplier applied across a full token set.
• • Color Accessibility Guidelines — where SC 1.4.3 sits among the other criteria.
• • High Contrast Color Combinations — pre-measured pairs you can paste into tokens.
• • Form Validation Color Accessibility — error and helper text, where the 4.5:1 rule bites hardest.

Pre-ship text contrast checklist

• 1.Confirm which threshold actually applies before picking a color: 3:1 requires 24px+ regular or 18.66px+ bold. Everything else needs 4.5:1, including 20px subheadings.
• 2.Grep your codebase for text-gray-400, text-slate-400, text-zinc-400, and text-neutral-400 on light surfaces. All four fail 3:1 and 4.5:1 on white.
• 3.Test every text token against every surface it appears on, not just the page background. Use the Contrast Checker for each pair.
• 4.For light mode, aim for 5.6:1 on white if text will appear on tinted cards (gray-50, gray-100, blue-50, etc.).
• 5.For dark mode, aim for 7.7:1 on the base surface if text will appear on raised panels or overlays.
• 6.Underline all in-paragraph links unless body text measures 13.5:1+ against the background.
• 7.If placeholder text conveys required information (format hints, examples), ensure it meets 4.5:1.
• 8.Treat the bold allowance as unavailable if your brand font has a light bold weight. The 3:1 concession is for stroke width, not for a number in a CSS file.
• 9.Test dark mode independently — do not assume inverting light-mode colors will work.
• 10.Run Chrome DevTools CSS Overview (Capture → Colors section) to export every text/background pair site-wide. Sort by lowest contrast and prioritize fixes.

Frequently asked questions