A Brief Note on Highlighted Text

TL;DR: If you plan to style text highlighted by the browser, you must give it sufficient contrast — 3:1 for the highlight block against its background and (probably) 4.5:1 for the text within that highlighted block against that background. CSS Context CSS provides methods to style the highlights that browsers apply from selected text (::selection), link target text (::target-text), and spelling & grammar error text (::spelling-error and ::grammar-error). To limit layout shifts, the spec only allows setting background-color, color, text-decoration (and its associated properties), text-shadow, stroke-color, fill-color, and stroke-width. The CSS Pseudo-Elements Module Level 4 Working Draft specification covers this in § 3. Highlight Pseudo-elements, including the allowed properties. When using Windows High Contrast Mode / Contrast Themes / forced-colors, ::target-text will use CSS system color keywords MarkText and Mark. While ::selection will use HighlightText and Highlight. Conversely, ::spelling-error and ::grammar-error use text-decoration, not background / foreground colors. According to Delan Azabani on Mastodon, Igalia is working on bringing find-in-page pseudo element selectors (::search-text and ::search-text:current) to at least Chromium while acting on the CSSWG issue for same. I could not find what system color keywords it would use (though I just asked). WCAG Context WCAG SC 1.4.3: Contrast (Minimum) requires a contrast ratio of at least 4.5:1 for text against its background. Larger or bolder text can get by with a 3:1 contrast ratio. SC 1.4.11 Non-text Contrast similarly requires a 3:1 contrast ratio to distinguish a UI component’s state (such as selected). This may be against the page background or it may be the background of the container. Which means this highlight color may need to be defined more than once in your page (and the text along with it). When you pair these two Success Criteria, it means your highlight background needs a 3:1 contrast ratio against its own background and the text will need a 4.5:1 (unless bold / large) contrast ratio against that. As a curve ball, SC 1.4.1 Use of Color states that color is not the only method used to convey information or distinguish a visual element. The challenge is that the limited styles the CSS specification allows are mostly color, with the obvious exceptions of text-decoration (and its associated properties), text-shadow, and stroke-width. It may be impractical to lean on these in many contexts, but I expect the AGWG will get dragged into it at some point (see the discussion on visited / unvisited links for example) You may have noticed that default user agent styles regularly have contrast issues. That doesn’t make them ok, but they are outside the scope of WCAG. As soon as you modify the browser’s default styles, you are on the hook for conforming to WCAG. Consider this note for the WCAG definition of contrast ratio (relevant bits highlighted): WCAG conformance should be evaluated for color pairs specified in the content that an author would expect to appear adjacent in typical presentation. Authors need not consider unusual presentations, such as color changes made by the user agent, except where caused by authors’ code. Also, 1.4.11 has this carve-out: …except […] where the appearance of the component is determined by the user agent and not modified by the author. Essentially, if you touch it, you own it. Other posts of mine about customizing what are otherwise system defaults and are often fine if you don’t mess with them: WHCM and System Colors Baseline Rules for Scrollbar Usability Wrap-up If you plan to style text highlighted by the browser,  » Read More