v144 · css

CSS find-in-page highlight pseudos

This feature exposes **find-in-page** search result styling to authors as a highlight pseudo-element, like selection and spelling errors. This allows authors to change the foreground and background colors or add text decorations, which can be especially useful if the browser defaults have insufficient contrast with the page colors or are otherwise unsuitable

concepts

  1. Highlight Styling

    Style the find-in-page highlight overlays directly. `::search-text` covers all matches, `:current` picks out the active one.

  2. Current vs Rest

    Live colour picker for inactive vs current matches. Trigger ctrl-F on the article and see your palette apply in real time — the accessibility fix in one screen.

  3. Contrast Auditor

    Pick custom highlight + current colours, switch between light and dark articles, and the auditor scores each pair against WCAG AA in real time. The accessibility motivation, made measurable.

  4. Theme Presets

    Five ready-to-copy highlight themes — newspaper, terminal, neon, minimal, developer docs. Click a theme, open Ctrl+F / ⌘F, and see ::search-text and ::search-text:current live in the article. Copy CSS to take any style home.

  5. Dark Mode Fix

    The browser's default yellow find-in-page highlight fails WCAG AA on dark backgrounds (≈2.8:1 contrast). Side-by-side comparison shows the default highlight vs a ::search-text custom theme on the same dark article. Switch between developer-docs, terminal, amber, and high-contrast themes; a live contrast meter scores each against WCAG AA.

why it shipped

Authors would like to customize the highlighted text from find-in-page to have a style consistent with that of the rest of the page. In particular, the existing find-in-page highlights may offer poor contrast, harming accessibility.

references