Dustin SnellingsSoftware engineer

Build journal / Engineering note

The contrast gate was checking a color I don't ship

A palette override entered the wrong token map. The fix made the contrast check evaluate each intended state separately.

All notes

Recorded repair ·

A contrast check can do the math correctly and still check the wrong color. An earlier version of this portfolio did exactly that.

The stylesheet contained a default yellow-green accent and a mint-colored override for a hidden interaction. The check read the stylesheet, resolved its custom properties, and calculated contrast. But its parser grouped declarations by their position in the file instead of keeping the selectors separate.

Where the wrong value entered

The parser split the file at the light-theme media query. The optional accent override appeared before that query, after the default root declarations. Both sets entered the same map, so the later override replaced the default accent during the check.

This is a simplified version of the arrangement at the time:

:root { --acid: oklch(0.84 0.18 118); }
:root[data-accent='shifted'] { --acid: oklch(0.84 0.18 158); }
@media (prefers-color-scheme: light) { /* light tokens */ }

The browser applied the second selector only when the attribute was present. The parser ignored that condition. It was evaluating an optional state as if it were the default.

The correction

The August 5 fix removed the shifted block from the base parse, then applied its overrides separately. That created four explicit cases: dark, light, dark with the shifted accent, and light with the shifted accent. Each case had its own token map and contrast calculation.

What I would trust that check to tell me

It evaluates specified token pairs in those states. It does not prove that every rendered element uses those tokens correctly, or that the entire interface is accessible. Browser inspection is still needed to catch styling, focus, layout, and interaction problems outside that calculation.

This is a record of the earlier design and its repair. The site’s visual design has since changed; the old colors and interaction are context for the bug, not instructions for using today’s page.

The useful question

Which state did the check actually evaluate? Reading the source is a useful start. Preserving the conditions under which that source applies is what makes the result relevant.

verso