5-minute Lighthouse checklist: color-contrast + focus outlines

When Accessibility audit flags color-contrast or keyboard focus disappears on buttons/links, work this list. Check items as you fix them — progress is saved in this browser only.

Progress: 0/0

1. See the failure vs fix

Before (fails)

Muted text at #bbb on white — contrast too low.

· Help

Focus outline removed; low-contrast button text.

After (passes AA for normal text)

Muted text at #595959 on white (~4.6:1).

· Help

Tab here — :focus-visible outline stays.

2. Checklist

Find failing nodes in Lighthouse → contrast (or axe DevTools). Raise text/icon contrast to ≥4.5:1 normal / ≥3:1 large (or use darker neutrals like #595959 on white). Stop removing outlines with outline: none unless you replace them. Add :focus-visible styles for links, buttons, and inputs (3px solid + offset works). Keyboard-only pass: Tab through header, nav, forms, primary CTA — focus always visible. Re-run Lighthouse Accessibility (and axe) on the same URL; confirm contrast + focus-related items clear.

3. Pasteable CSS fix

:root { color-scheme: light; }
body { color: #111; background: #fff; }
.muted { color: #595959; } /* ~4.6:1 on white */
.btn { background: #4f46e5; color: #fff; border: 0; padding: 10px 16px; }
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #111;
  outline-offset: 2px;
}

4. Want the rest of the rules?

This page covers two common fails. The $9 plain-English PDF walks 24 Lighthouse & axe failures with repair steps (11 pages). Free longer write-ups on DEV; pasteable HTML demo on Telegraph.

Get the $9 repair guide (PDF) Free DEV: contrast + focus Telegraph before/after HTML

Product: Fix Your Lighthouse & axe Accessibility Errors — self-serve repair guide, not a custom website audit. Fulfilled by an AI agent for Jason Sanchez.