パンくずリストの色はどう決める？目立たせすぎないナビゲーション配色

パンくずリストは、「ホーム › カテゴリー › 現在のページ」のように、サイト内で今いる位置を階層で示すナビゲーションです。本文を読むための主役ではないため、強いアクセントカラーを広く使うより、リンク・区切り記号・現在地をニュートラルな濃淡で整理するとページになじみやすくなります。ただし、目立たせないことと読みにくくすることは別です。文字のコントラストとフォーカス表示は確保します。

親ページのリンクと現在地を、濃さと形で分ける

以下のHEX（Webで色を表す16進数コード）例では、パンくずリストの背景を白 ■#FFFFFF にします。親ページへのリンクをブルーグレー ■#475569 にすると、白に対するコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約7.58:1です。現在ページをダークブルーグレー ■#334155 にすると約10.35:1です。

リンクは色だけで区別せず、下線などクリックできることが分かる手掛かりを残します。現在ページはリンクにしない構成なら、下線を付けず太字にするなど、親ページとの形の違いも付けられます。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2のUse of Colorでは、色を情報伝達の唯一の手段にしないことが求められます。

区切り記号の「›」や「/」をスレートグレー ■#64748B にすると、白 ■#FFFFFF に対して約4.76:1です。リンクより弱く見せつつ、文字として十分な明暗差を持たせられます。区切り記号は装飾として扱い、階層そのものはリスト構造で伝えると、見た目の記号だけに意味を依存しません。

パンくずリストは階層ナビゲーションとして構造も整える

W3CのBreadcrumb Patternでは、パンくずリストは現在ページの親ページへのリンクを階層順に並べたものとして説明されています。全体を <nav> で囲み、aria-label="Breadcrumb" などでナビゲーションの種類が分かる名前を付けます。リンクは順序のあるリストとして並べる方法が示されています。

現在ページをリンクとして含める場合は、aria-current="page" を付けることで現在位置をプログラム上でも示せます。現在ページをリンクにしない場合は、W3CのBreadcrumb Patternでは aria-current は任意です。見た目でも「現在ページだけ太字・下線なし」のようにすれば、親ページへの移動リンクとの違いを色だけに頼らず示せます。

W3CのBreadcrumb Exampleでは、視覚的な区切り記号をCSS（Cascading Style Sheets、Webページの見た目を指定する仕組み）で追加し、スクリーンリーダーに重複して読み上げさせない例が紹介されています。区切りの色を強くするより、リンクと現在地の関係が構造で伝わることを優先します。

ホバーとフォーカスだけ少し強い色を使う

通常のリンクを ■#475569 に抑え、ホバー時だけロイヤルブルー ■#1D4ED8 にすると、白 ■#FFFFFF に対して約6.70:1です。常時アクセント色にするより、操作できるリンクへポインターを合わせたときだけ変化を付けると、本文よりパンくずリストが目立ちすぎるのを防ぎやすくなります。

キーボード操作時のフォーカスには、ブルー ■#2563EB のリングを白 ■#FFFFFF の背景に表示すると約5.17:1です。W3CのFocus Visibleでは、キーボードで操作できる要素に見えるフォーカス表示が必要とされています。通常リンク・現在地・ホバー・フォーカスを同じ見た目にせず、それぞれの役割を分けます。

背景がライトグレー ■#F8FAFC の場合でも、親リンクの ■#475569 は約7.24:1、現在地の ■#334155 は約9.90:1、区切り記号の ■#64748B は約4.55:1、フォーカスの ■#2563EB は約4.94:1です。背景色を変えたら、同じ文字色をそのまま使わず実際の組み合わせで再確認します。

HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、パンくずリストのリンク・現在地・区切り記号・フォーカスと実際の背景色の組み合わせは別途確認します。