ドロップダウンメニューの背景色は？ナビゲーションを見やすくする配色

ドロップダウンメニューは、ナビゲーションの項目を開いたときに追加のリンクを表示するUI（ユーザーインターフェース）です。背景色は強く目立たせるより、リンク文字を読みやすくし、ページ本体やヘッダーとメニュー面の境界が分かることを優先します。基本は白などの明るい面を使い、必要な枠線とホバー・フォーカスだけにアクセントを加えると整理しやすくなります。

メニュー面は白を基本にし、必要な境界だけはっきり見せる

以下のHEX（Webで色を表す16進数コード）例では、ページやヘッダー周辺をライトグレー ■#F8FAFC、開いたドロップダウン面を白 ■#FFFFFF にします。この2色のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約1.05:1なので、背景色の差だけでメニューの輪郭を示すのは十分ではありません。

メニュー面の境界が必要な場合は、スレートグレー ■#64748B の枠線を白 ■#FFFFFF に合わせると約4.76:1です。リンク文字をダークブルーグレー ■#334155 にすると、白に対して約10.35:1です。背景・境界・文字の役割を分けることで、メニュー面だけを過度に濃くせずに読みやすさを保てます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2のNon-text Contrastでは、操作部品や状態を識別するために必要な視覚情報は隣接色との3:1以上が基準です。ただし、枠線がなくても文字やアイコンで操作部品の存在を識別できる場合、すべての境界線自体に3:1が必要という意味ではありません。境界を操作部品の識別に使う場合は、その実際の隣接色との比を確認します。

開閉ボタン・リンク・フォーカスの色を役割ごとに分ける

一般的なWebサイトのナビゲーションでは、W3CのDisclosure Navigation Menu Exampleのように、上位項目のボタンでリンク一覧を開閉する構成が使えます。W3Cは、このような通常のサイトナビゲーションでは、複雑なキーボード操作を前提とするWAI-ARIAの menu ロールを必ずしも使う必要はなく、Disclosure Patternで標準的なリンクを表示する方法を例示しています。

開閉ボタンには aria-expanded を使い、閉じているときは false、開いているときは true にします。必要に応じて aria-controls で対応するリンク一覧を参照します。見た目では、閉じた状態の矢印をブルーグレー ■#475569 にすると、白 ■#FFFFFF に対して約7.58:1です。開いた状態では矢印を下向きに変え、ロイヤルブルー ■#1D4ED8 にすると約6.70:1です。

リンクにポインターを合わせたときは、背景をライトブルー ■#DBEAFE、文字をダークブルー ■#1E3A8A にすると約8.49:1です。ホバー背景と白 ■#FFFFFF の差は約1.22:1なので、ホバー色だけを重要な状態情報として扱わず、ポインター位置や下線・文字の太さなども併用します。

キーボード操作と、開いたメニューが消える条件も確認する

キーボードフォーカスには、ダークネイビー ■#0F172A のリングを使う例があります。白 ■#FFFFFF に対して約17.85:1、ホバー背景のライトブルー ■#DBEAFE に対しても約14.63:1です。W3CのFocus Visibleでは、キーボードで操作できる要素に見えるフォーカス表示が必要です。開いている状態と、現在フォーカスしているリンクを同じ見た目にしないようにします。

ポインターのホバーやキーボードフォーカスでドロップダウンが開く場合、WCAG 2.2のContent on Hover or Focusでは、追加表示された内容が「閉じられる」「その内容へポインターを移せる」「必要な間は表示が続く」ことが求められます。W3CのDisclosure Navigation Menu Exampleでも、開いたメニューでEscapeを押すと閉じる動作や、フォーカスがナビゲーション領域の外へ移ると閉じる例が示されています。

HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、メニュー背景・文字・枠線・ホバー・フォーカスなど、実際に隣接する組み合わせは別途確認します。