ウェブページでテキストを検索または選択した際に表示されるハイライトの色は、もはやブラウザのデフォルトに任せる必要はありません。Chrome 144で正式サポートされた::search-textをはじめ、::selection、::target-textなどの疑似要素をCSSで直接制御できるようになりました。本記事では、各要素が何を選択するのかを明確に区別し、アクセシビリティとユーザビリティを考慮した実践的なスタイリング手法を紹介します。詳細は参考資料でご確認いただけます。
ハイライト疑似要素比較表
各疑似要素の役割を一目で比較できる表は理解の助けになります。
| 疑似セレクタ | 選択対象 | 備考 |
|---|---|---|
::search-text | ページ内検索(Find-in-page)の一致結果 | ::search-text:currentは現在の対象を選択 |
::target-text | URLテキストフラグメントによるハイライト | 検索エンジンからのリンクなどで発動 |
::selection | ポインタでドラッグ選択したテキスト | |
::highlight() | JavaScriptカスタムハイライトAPIで定義 | |
::spelling-error | スペルミス (下線) | 編集可能コンテンツに主に適用 |
::grammar-error | 文法エラー (下線) | 編集可能コンテンツに主に適用 |
実践：相対色構文を用いた柔軟なスタイリング
デフォルトの黄色いハイライトがページ背景とのコントラスト不足で可読性を損なう場合、相対色構文(Relative Color Syntax)を使用して背景色に反応するハイライトを作成できます。核心は、RGBチャネル値を反転(invert)させ、常に明確なコントラストを保証することです。
body {
--background: #38003c;
background: var(--background);
}
::selection,
::target-text,
::search-text {
/* テキスト色を背景色と同一に */
color: var(--background);
/* 背景色をRGBに変換後、各チャネルを(255 - 値)で反転 */
background: rgb(from var(--background) calc(255 - r) calc(255 - g) calc(255 - b));
}
/* 各ハイライト種別を視覚的に区別 (R, G, Bチャネルを一つずつ維持) */
::selection {
background: rgb(from var(--background) r calc(255 - g) calc(255 - b) / 70%);
}
::target-text {
background: rgb(from var(--background) calc(255 - r) g calc(255 - b) / 70%);
}
::search-text {
background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 70%);
}
::search-text:current {
background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 100%);
}
上記のコードでは、r、g、bは--background変数の色のRGBチャネル値です。calc(255 - r)の式で色を反転させ、不透明度(/ 70%)を調整して重なった場合でも区別可能にしています。
核心的な考察と注意点
このようなスタイリングが必要な理由は、単に見た目を良くするためではありません。**アクセシビリティ（色コントラスト）とユーザビリティ（強調効果）**を保証するためです。特に::search-textと::target-textは、ユーザーが意図的に探した情報であるため、視覚的に明確に表示されなければなりません。
一点注意すべきは、完全に反転した色も常に良いコントラストを保証するわけではないことです。例えば灰色(#808080)は反転しても同じ灰色になります。したがって、将来的なcolor-contrast()関数のようなCSS機能に期待しつつ、現時点では色コントラスト検証ツールを用いて入念にテストする習慣が不可欠です。
ハイライトは、デザインパレットに調和して溶け込むよりも、機能的に「目立つ」必要がある場合があります。ユーザーの注意を最大限に引き、正確な情報を伝えることがより重要なUI要素だからです。新しい::search-textを皮切りに、ブラウザが提供する様々なセレクタを習熟し、より優れたユーザー体験を設計してみてください。