demo · v144

Contrast Auditor

The accessibility motivation, made measurable. Pick a background and foreground for matches and current-match, against a dark or light article. The auditor scores both pairs against WCAG AA so you can see the difference between "I shipped a brand colour" and "I shipped a brand colour that fails 4.5:1".

Once the palette looks good, hit Ctrl/Cmd + F and search for “hyphae”, “mycelium” or any word from the article to see the styled highlights in context.

::search-text: checking…

Mycelium & the slow city

Beneath every healthy hyphae mat, mycelium threads weave through soil, water, and stone. Find-in-page highlights helped accessibility consultants audit long documents like this for months. The hyphae chapter (the second of the report) discusses the network in detail.

If you searched for “hyphae” in this paragraph you would see two matches: the body word and the italic word. The browser picks one as current; the others are inactive matches. Author CSS now decides how each of those four states render.

Mycelium and hyphae are not interchangeable terms but they often appear together in surveys.

the API

::search-text          { background: yellow; color: black; }
::search-text:current  { background: dodgerblue; color: white; }

/* media query support means dark mode gets its own pair */
@media (prefers-color-scheme: dark) {
  ::search-text         { background: #ffd54f; color: #000; }
  ::search-text:current { background: #4f9bff; color: #000; }
}

see also