WEBサイトの選択文字色を変える方法｜テキスト選択時の配色を考える

TIPS

Webページの文字をドラッグして選択したときは、ブラウザーやOSが選択範囲の文字色と背景色を変えて表示します。CSSでは ::selection 擬似要素を使うと、この選択中の文字色と背景色を調整できます。選択時の配色は装飾だけでなく、選択された文字そのものを読めることが重要です。この記事では、明るいページ・暗いページ・ブランドカラーを使うページの3例で、選択文字色を決める方法を紹介します。

`::selection` では文字色と背景色をセットで決める

CSS Pseudo-Elementsの仕様では、::selection はユーザーが現在選択している文書の範囲を表します。選択範囲には color と background-color など、レイアウトを変えない限られたプロパティを指定できます。文書全体の基本スタイルを作る場合は、W3C仕様で :root::selection を使う方法が示されています。子要素側で別の選択色を上書きしやすいためです。

:root::selection {
  background-color: rgb(49 95 120);
  color: rgb(255 255 255);
}

この例では選択背景をブルー ■#315F78、選択文字を白 ■#FFFFFF にしています。両色のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約6.91:1です。背景色だけを変えて文字色を元のままにすると、組み合わせによっては選択中だけ文字が読みにくくなるため、2色をセットで確認します。

ページの明るさに合わせた3つの選択配色

1. 白背景では濃いブルーに白文字

通常背景が白 ■#FFFFFF、本文がチャコール ■#25272A のページなら、選択背景をブルー ■#315F78、選択文字を白 ■#FFFFFF にすると、選択中の文字と背景は約6.91:1です。通常本文と白背景の比率も約14.98:1あります。選択前後で背景色が明確に変わるため、選択範囲を見つけやすい組み合わせです。

2. 暗いページでは明るいアンバーに濃い文字

ダークネイビー ■#1F2937 の背景に、通常文字をライトグレー ■#F3F4F6 で表示するページでは、選択背景をアンバー ■#FFD166、選択文字をダークネイビー ■#1F2937 に切り替える方法があります。選択中の文字と背景は約10.18:1、通常文字と暗い背景も約13.34:1です。暗いページだから選択文字も白のまま、と固定せず、選択背景に合わせて文字色を反転させます。

3. ブランドカラーを使う場合も、選択中の文字コントラストを優先する

ウォームオフホワイト ■#F7F4EE のページで、ブランドの落ち着いたパープル ■#6B4F7A を選択背景に使う場合は、白 ■#FFFFFF を選択文字にすると約6.94:1です。通常本文をチャコール ■#25272A にすると、オフホワイトとの比率は約13.64:1です。ブランドカラーを使う場合でも、選択中に文字が読める組み合わせを先に確認します。

選択中の文字も通常のテキストとしてコントラストを確認する

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上のコントラスト比が求められます。選択中も文字は読まれるため、::selection で独自色を設定する場合は、選択文字色と選択背景色の組み合わせを確認します。特にリンク、コード、引用など元の文字色が異なる要素では、選択スタイルが継承された結果も実際に選択して確認します。

文書全体の選択色には :root::selection を使い、特定の領域だけ別の色にしたい場合は、その要素の ::selection を追加します。全称セレクターを使った *::selection はハイライトの継承を妨げるため、文書全体の基本設定としては避けた方が扱いやすくなります。HueRollでは候補色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで選び、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、選択文字色と選択背景色の比率は別途確認します。

::selection では文字色と背景色をセットで決める