What it means
The contrast ratio between text and its background falls below the WCAG 2.1 AA threshold: 4.5:1 for normal text, 3:1 for large text (18.66px bold or 24px regular and above) and for interface components such as icons, borders and focus indicators.
Why it matters
Low contrast affects far more people than any other accessibility failure — anyone with reduced vision, anyone over about forty, anyone on a phone in sunlight, anyone on a cheap monitor at a bad angle. It does not produce complaints; it produces people who quietly stop reading. Because contrast usually comes from tokens in a design system, a single failing colour pair propagates across every page built from it.
How W3Audit detects it
Foreground and background colour pairs are resolved from the page’s HTML and stylesheets and measured against the threshold for each element’s size and weight. Declared states are measured too — hover, focus, active, disabled and placeholder — because a link that passes at rest often fails on hover. Text over images, gradients or video is flagged for manual review during auditor sign-off, since the effective background varies by pixel and automated measurement is unreliable there.
How severe it is
Critical for body text and for form controls, where legibility is the whole point. High for headings, buttons and focus indicators. Medium for decorative captions, metadata and disabled states — still a defect, but neither blocking nor high-reach. Findings are reported against the token or component, with the pages affected listed underneath.
How to fix it
Darken the text or lighten the background until the pair clears the threshold; do not compensate with bold weight, which does not change the measured ratio at normal sizes. Fix it at the token, not per instance.
/* fails: 2.9:1 on white */
.meta { color: #9aa0a6; }
/* passes: 4.6:1 on white */
.meta { color: #6b7280; }
/* keep focus indicators above 3:1 against both
the component and the page background */
:focus-visible { outline: 2px solid #3b3aa8; outline-offset: 2px; }
For text over imagery, add a scrim or a solid panel behind the text rather than relying on the image being dark enough — images change, and the one you tested is not the one a client will upload next month.
How to verify the fix
Measure the computed colours with a contrast checker rather than the values in your design file, since opacity and stacked backgrounds change the result. Re-check every interactive state, then view the page in greyscale — if the hierarchy still reads, contrast is doing structural work and not just clearing a number.
Where this sits in your audit
This finding belongs to the UX & accessibility category — see the UX & accessibility audit for everything else reviewed alongside it, or the methodology for how its severity and score contribution are calculated. The website audit checklist includes it as a step you can run yourself.