Fix what Lighthouse flags about contrast and labels

Lighthouse flagged a bunch of accessibility issues on my page and I don't know where to start fixing them.

IntermediateRead 5 minDoing: about twenty minutes6 steps

▶ Start

What you'll have at the end

A Lighthouse accessibility score that's gone up, with every contrast and missing-label finding fixed.

Before you start

You need

A page built with plain HTML and CSS, open in Chrome, carrying at least one piece of styled text and one form field nobody has checked for contrast or a real name yet.

Not covered

Every other Lighthouse accessibility check: missing alt text, keyboard traps, invalid ARIA roles, and heading order all need their own separate look this recipe doesn't give them.

Leans on

6 steps

Where to go next

Give every icon-only button an accessible name

the unlabeled control turns out to be an icon-only button instead of a text field, which needs a different accessible-name technique.

Checked 20 Aug 2026

Part of the Chrome DevTools cookbook