All Text Elements Must Have Sufficient Contrast Colors: How to Fix It

What this check flags

This check fails when any text on the page — not just the headline or one hero block, but every paragraph, caption, placeholder, disabled label, and footer line — falls below the WCAG contrast minimum against its background. The stakes are plain: text a reader cannot resolve is content that, for them, is not there, and low-contrast copy is one of the most common accessibility failures on the entire web.

This is the page-wide sweep. It is broader than the earlier single-element check (Text Color Contrast, AC-019), which flags one offending element so you can see the pattern. This one insists the rule holds everywhere — and the failures it catches are almost always the quiet ones: gray helper text under form fields, muted timestamps, disabled-looking buttons that are actually live, light captions on photos.

A real failing example, and the fix

The classic offender is "subtle" secondary text. A designer wants meta information to recede, picks a light gray, and it lands well under the threshold:

<style>
  .card { background: #ffffff; }
  .card .meta {
    color: #999999;   /* ~2.8:1 on white — fails */
    font-size: 14px;
  }
</style>

<div class="card">
  <h3>Pricing update</h3>
  <p class="meta">Posted 12 March · 3 min read</p>
</div>

#999999 on white is roughly 2.8:1 — below the 4.5:1 floor for normal text. The fix is to darken the gray until it clears the threshold; it still reads as secondary, just legibly so:

<style>
  .card .meta {
    color: #595959;   /* ~7:1 on white — passes comfortably */
    font-size: 14px;
  }
</style>

The same trap catches placeholder text (::placeholder often defaults to a failing gray), disabled controls, and light text laid over a photo where the background luminance shifts pixel to pixel. Every one of those is "text" as far as this check is concerned.

Contrast thresholds by text size

What counts as "sufficient" depends on the text size and weight, because larger glyphs stay readable at lower ratios. Here is what each level requires:

Two things trip people up. First, bold lowers the size at which text qualifies as "large," so a bold 19px label only needs 3:1. Second, the disabled exemption is narrow: if a control is actually functional, it is not exempt just because it is styled to look faint.

How to detect it

1. Run an automated audit (axe, Lighthouse, WAVE). The "all text elements" rule reports every node whose computed contrast is below its size-appropriate threshold.
2. Use a contrast picker on suspicious spots — the DevTools color picker shows the live ratio and a pass/fail badge for the selected foreground/background pair.
3. Hunt the usual soft targets by hand: placeholder text, form hints, timestamps, footer links, captions, and any text sitting on top of an image or gradient.
4. Check text over images specifically. Contrast can pass over the dark part of a photo and fail over the light part; a scrim or text shadow is often needed.
5. Test both themes. If you ship a dark mode, re-run the whole audit there — a palette that passes on white frequently fails when inverted.

How to fix it

1. Adjust the foreground or background luminance until the pair clears the threshold for its size. Darkening a gray is usually enough; you rarely need to touch brand hues.
2. Fix it at the token level. If your gray palette has failing steps, correct the design tokens so every component inherits compliant values instead of patching one card.
3. For text over imagery, add a semi-opaque overlay, a solid text panel, or a text shadow so the effective background contrast is stable across the image.
4. Restyle placeholders and helper text to a passing gray, and confirm disabled-looking-but-active controls actually meet the ratio.
5. Re-audit the full page — and every theme — after the change, since this check only clears when nothing is left failing.

FAQ

How is this different from the AC-019 contrast check?

Scope. AC-019 surfaces a representative failing element so you can identify the pattern quickly. This check is the exhaustive version: it will not pass until every text node on the page meets its threshold. Think of AC-019 as the spot-check and this as the full sweep.

Do I have to hit 7:1 (AAA) or is 4.5:1 (AA) enough?

AA (4.5:1 for normal text) is the standard most audits, legal requirements, and this check target. AAA (7:1) is a stronger goal worth reaching where you can, especially for long-form reading, but you are not failing this check by "only" meeting AA.

Does gray placeholder text really need to pass?

Yes. Placeholder text is real text conveying information, so it is held to the 4.5:1 normal-text minimum. The faint default gray browsers apply almost always fails, which is why placeholders are one of the most frequent offenders this check catches.

My dark mode passes but light mode fails (or vice versa). Why?

Contrast is a relationship between foreground and background, and inverting a theme changes both. A color pair tuned for one background rarely holds up against the opposite one, so each theme needs its own audit. Never assume parity between modes.

Is low contrast an SEO problem too?

Indirectly. Search engines do not measure contrast ratios, but users bouncing off text they cannot read hurts engagement, and accessibility overlaps with the quality signals Google does care about. The accessibility and SEO overview maps where those two actually meet. For the readability side of the same coin, see the readability glossary entry.