The scan passed and the page still failed

I build an accessibility-first CMS. Every page it publishes has to pass a real accessibility gate: automated checks, contrast math computed at theme-compile time, a browser-based scanner sweeping every layout at desktop and mobile widths. Green checkmarks everywhere.

And for four releases, the hero text on one of my sites was sitting on an unprotected photograph, one CSS change away from unreadable, while every checker smiled and nodded.

What happened

The design called for white text over a photo, with a dark overlay guaranteeing contrast. The overlay math ran at build time: given the overlay color and opacity, the worst possible pixel underneath still holds 4.5 to 1 against white. Proven, by arithmetic, before a single page shipped.

Then I moved the photo in the CSS stacking order. Positioned elements paint above static ones, and the photo quietly slid on top of the overlay. The overlay still existed. Its computed style was still correct. It just never painted where anyone could see it.

Why nothing caught it

Three checkers, three blind spots, one failure:

Every tool answered its own question correctly. Nobody was asking the right question: what color are the actual pixels behind this text?

The fix, and the lesson

The fix was two lines of CSS restoring the paint order. The lesson was worth more.

If a guarantee depends on something rendering, verify the render. I now sample actual pixels from the rendered page: the hero should average deep sage, and for four releases it averaged cream. One pixel-sample assertion would have caught in seconds what three sophisticated checkers missed for days.

Automated accessibility checking is essential. I built a whole product on that belief. But a green checkmark tells you a question was answered, not that the right question was asked. Somebody still has to look at the page.