Color contrast ratiosWhat it checks and how to fix it

What it checks

Reads Lighthouse's color-contrast audit for the page and lists every text element whose contrast ratio is below the WCAG AA minimum (4.5:1 for normal text, 3:1 for large text). The check passes when no element falls short, fails when Lighthouse scores the audit 0, and warns when only some elements fall short. It runs on the pages the project measures with Lighthouse.

Why it matters

Low-contrast text is hard or impossible to read for people with low vision, for older readers and for anyone on a phone in sunlight. Contrast is one of the most common WCAG failures and one of the easiest for automated accessibility scanners and auditors to flag. Pale grey placeholder and caption text is the usual culprit.

How to fix it

Darken the text or lighten the background until each pair reaches 4.5:1 (3:1 for text at least 24px, or 19px bold).

/* Before: #9ca3af on white is about 2.5:1 */
.muted { color: #9ca3af; }

/* After: #4b5563 on white is about 7.5:1 */
.muted { color: #4b5563; }

Check both themes if the site has a dark mode:

@media (prefers-color-scheme: dark) {
  .muted { color: #d1d5db; } /* on #111827 */
}

Use the contrast picker in Chrome DevTools (Inspect, then click the color swatch) or WebAIM's Contrast Checker to confirm each fix.