Color contrast

highaccessibility-color-contrast

WCAG requires 4.5:1 for normal text, 3:1 for large text. Low contrast is one of the most common — and most overlooked — accessibility failures.

What it is

This reads Lighthouse's own color-contrast audit: whether text has enough contrast against its background, judged by the WCAG formula rather than eyeballed. The threshold is 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold).

It needs a rendered page to evaluate — final computed colors, not source CSS — which is why it comes from the PageSpeed Insights run rather than the raw-HTML checks the free scan can do on its own.

Why it matters

Low contrast text is unreadable for anyone with low vision, is a common problem in bright sunlight or on a low-quality screen even for someone with normal vision, and is one of the most common accessibility failures on the web precisely because it looks fine on the screen the designer used to build it.

It's usually a small, isolated fix — darken text or lighten a background until the ratio clears the threshold — but worth treating as a design-token-level fix rather than a one-off, since the same low-contrast pairing tends to recur across a site once it exists anywhere.

How to fix it

with a reference doc
css — passes at roughly 12.6:1
.body-text {
  color: #333333;
  background: #ffffff;
}

Reference documentation

Related checks

3
highForm field labelsThis checks that every form field has an associated label — a <label> with a for attribute matching the field's id, or the input nested inside the label — read from Lighthouse's rendered-DOM audit rather than the raw HTML, so it catches labels missing at render time as well as in markup.mediumImage alt textEvery <img> should carry an alt attribute: a text description for informative images, or an empty alt="" for images that are purely decorative. This check reads it directly out of the HTML the server sent, so it runs on every scan regardless of whether a rendering engine is available.lowHeading hierarchyHeading hierarchy is whether a page's <h1> through <h6> tags step down one level at a time — an <h2> can be followed by another <h2> or an <h3>, but not by an <h4> with no <h3> in between. This check reads the sequence of heading tags in the order they appear in the HTML.

This is one of the 75 checks the scanner runs. See what we check for the full list, every severity weight, and how the score is computed from them.

See whether your own site passes color contrast.

One page, all 75 checks, free. No account, no card.

Run a scan