タブUIの色はどう決める？選択中と未選択を分かりやすくする方法

タブUI（ユーザーインターフェース）は、複数の内容を同じ場所で切り替えて表示するための操作部品です。色を決めるときは、未選択のタブを落ち着かせ、選択中のタブだけを強調すると整理しやすくなります。ただし、背景色の差だけでは選択状態を見分けにくいことがあります。下線・文字の太さ・フォーカス表示も組み合わせ、選択中と現在操作中を別の状態として伝えます。

未選択は淡い面、選択中は白＋アクセント線で分ける

以下のHEX（Webで色を表す16進数コード）例では、タブ一覧の背景をライトグレー ■#F1F5F9 にし、未選択タブの文字をブルーグレー ■#475569 にします。この文字と背景のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約6.92:1です。

選択中のタブは背景を白 ■#FFFFFF、文字をダークブルー ■#1E3A8A にすると約10.36:1です。さらに下辺へロイヤルブルー ■#1D4ED8 の選択インジケーターを付けると、白 ■#FFFFFF に対して約6.70:1、周囲のライトグレー ■#F1F5F9 に対しても約6.12:1です。

白 ■#FFFFFF とライトグレー ■#F1F5F9 の比は約1.10:1しかないため、背景色の違いだけで選択状態を示すのは避けます。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2のUse of Colorでは色を情報伝達の唯一の手段にしないことが求められ、Non-text Contrastでは操作部品や状態を識別するために必要な視覚情報は隣接色との3:1以上が基準です。下線や太字など、色以外の変化も残します。

選択中はaria-selectedで伝え、フォーカスとは分ける

W3CのTabs Patternでは、タブ全体を tablist、各タブを tab、対応する内容を tabpanel として扱います。現在表示中のパネルに対応するタブは aria-selected="true"、それ以外は false にします。選択中の見た目とプログラム上の状態を一致させます。

タブでは「選択中」と「フォーカス中」が必ずしも同じとは限りません。W3Cの手動切り替え例では、左右の矢印キーでフォーカスを移動し、EnterまたはSpaceでそのタブを選択できます。つまり、フォーカスだけが移動しても表示中のパネルは変わらない場合があります。

そのため、選択中は ■#1D4ED8 の下線、フォーカス中はダークネイビー ■#0F172A の外側リングというように役割を分けます。フォーカスリングは白 ■#FFFFFF に対して約17.85:1、ライトグレー ■#F1F5F9 に対して約16.30:1です。W3CのFocus Visibleでは、キーボードで操作できる要素に見えるフォーカス表示が必要とされています。

タブパネルは通常の本文配色に戻し、状態色を増やしすぎない

選択したタブの内容を表示する tabpanel は、背景を白 ■#FFFFFF、本文文字をダークブルーグレー ■#334155 にすると約10.35:1です。選択中のタブだけにアクセントを集め、パネル本文まで青くしないことで、「どのタブが選ばれているか」と「内容を読む場所」を分けやすくなります。

W3CのTabs Patternでは、選択中のタブに対応するパネルを表示し、未選択タブに対応するパネルは非表示にする構成が示されています。タブの数が増えても、未選択・選択中・フォーカスの3つの役割を固定すれば、色数を増やさず状態を整理できます。

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