選択中のメニューを色で示す方法｜WEBナビゲーションの配色

WEBサイトのメニューで、今どのページを見ているのかが分かると、別のページへ移動するときにも迷いにくくなります。しかし、選択中の文字を別の色に変えるだけでは、色の違いが見分けにくい人に伝わらない場合があります。ここでは防災学習施設の「アクセス」ページを例に、選択中の色・下線・文字の強調を組み合わせる方法を紹介します。

選択中のメニューは色だけでなく形と現在地でも示す

ここでいう「選択中」とは、マウスで指している場所ではなく、今表示しているページに対応するメニューのことです。例えば「ホーム・展示案内・イベント・アクセス」の中でアクセスページを開いているなら、「アクセス」を現在のページとして示します。

通常メニューと選択中のメニューは、背景色だけでなく、太字・下線・枠など複数の手がかりで区別しましょう。選択中を示す背景と周囲の色には明暗差が必要です。色が違っても明るさが近ければ、状態を見分けにくいからです。

制作時には、HTML（WEBページの構造を記述する言語）のリンクに aria-current="page" を設定できます。これはARIA（画面を読み上げる支援技術などへ要素の状態を伝える仕組み）によって「このリンクが現在のページを示す」と伝える指定です。同じナビゲーション内で、現在のページを示す項目だけに付けます。タブで表示内容を切り替えるUI（画面の操作部品）に使う aria-selected とは役割が異なります。

防災学習施設のアクセスページで使う配色例

施設のメニューと、開館時間・地図案内・団体見学申込みを載せるページを想定します。HEXはWEBの色を16進数で指定するコードです。通常・現在地・ホバー・フォーカスの状態を分けて決めます。

• ナビゲーション全体：ヘッダー背景を深い青灰■#234B5E、通常のメニュー文字を白■#FFFFFFにします。文字と背景のコントラスト比は約9.38:1です。
• 現在の「アクセス」：背景を淡い金色■#F3D9A9、文字を濃いスレート■#283941にすると、文字と背景は約8.74:1、金色と周囲の青灰■#234B5Eは約6.84:1です。文字を太字にし、下端に濃い線■#204357を太めに引きます。線と金色■#F3D9A9の比率は約7.65:1です。
• 通常メニューのホバー：マウスを重ねたときだけ背景を青■#37647Aへ変え、白■#FFFFFFの文字を保ちます。文字と背景は約6.43:1です。ホバー（マウスを重ねた状態）は現在のページとは別なので、金色の背景や太い下線は付けません。
• キーボードのフォーカス：Tabキーで通常メニューに移動したときは白■#FFFFFFの輪郭線を青灰■#234B5Eの上に表示します。比率は約9.38:1です。選択中の金色■#F3D9A9の項目がフォーカスされた場合は濃い線■#1A3A4Dをその金色の面の内側に追加すると約8.72:1です。フォーカス（現在キー操作の対象になっている状態）と現在地を別々に見せます。
• 本文と見出し：背景をほぼ白■#F7F9F7、本文を濃いグレー■#26343Dにして約12.10:1を確保します。見出しは深い青■#265565にし、背景との比率は約7.72:1です。ページ名「アクセス」も大きな見出しとして表示します。
• 開館時間・交通案内カード：白■#FFFFFFの面に濃いグレー■#26343Dで説明すると約12.80:1です。カードの白■#FFFFFFと周囲のほぼ白■#F7F9F7は約1.06:1なので、グレー青■#70818Bの線を使い、白との比率を約4.04:1にします。
• 来館時の注意事項：淡い青緑灰■#E8F0EEに濃いグレー■#26343Dで文字を載せると約11.05:1です。案内欄とページ背景■#F7F9F7の差は約1.09:1のため、必要ならグレー青■#70818Bの枠線を付けます。枠線と案内欄の比率は約3.49:1です。
• 「団体見学を申し込む」ボタン：明るい本文の中では青緑■#235F73のボタンに白■#FFFFFFで文字を載せます。文字とボタンは約7.10:1、ボタンと周囲のほぼ白■#F7F9F7は約6.71:1です。ページを示すメニューの選択色とは役割を分けます。

現在地は金色の背景と太字・下線、操作中は輪郭線、申込みは本文内のボタンというように、意味ごとに見た目を分けました。選択中のメニューを一色だけで伝えるより、複数の手がかりがあるほうが状態を理解しやすくなります。

ページの移動後も、現在地とフォーカスを混同しない

「イベント」のリンクにマウスを重ねただけで、現在の「アクセス」から選択表示が移るようにはしません。クリックしてイベントページへ移動した後に、はじめて現在地の表示と aria-current="page" を「イベント」へ切り替えます。タブUIの aria-selected や、訪問済みリンクの色とも混同しないようにします。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）では、色だけで情報を伝えず別の視覚的な手がかりを用意することが求められます。レベルAAで通常サイズの文字には背景と4.5:1以上、大きな文字には3:1以上、操作や状態を識別するために必要な非テキストの表示にも隣接色と3:1以上のコントラストが基準です。キーボード操作時にはフォーカスが見えるようにしておきます。

スマートフォンの折りたたみメニューでも、開いているページに同じ現在地表示があるか確認しましょう。HueRollでは選択色と白・黒のコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。ここで示した色同士の比率は別途計算しています。