アコーディオンの色はどう選ぶ？開閉状態が伝わるWEB配色

アコーディオンは、見出しを押すと関連する内容を開閉できるUI（ユーザーインターフェース）です。閉じている項目と開いている項目を色だけで分けると、状態を見落とすことがあります。基本は、閉じた見出しをニュートラルにし、開いた見出しだけ背景・枠線・矢印の向きなどを変えて、複数の手掛かりで状態を伝えることです。

閉じた状態は白、開いた状態だけ淡いアクセントを使う

以下のHEX（Webで色を表す16進数コード）例では、閉じた見出しの背景を白 ■#FFFFFF、文字をダークブルーグレー ■#334155 にします。この文字と白のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約10.35:1です。必要な境界線をスレートグレー ■#64748B にすると、白に対して約4.76:1です。

開いた見出しは、背景をライトブルー ■#DBEAFE、文字をダークブルー ■#1E3A8A にすると約8.49:1です。枠線や開閉アイコンをロイヤルブルー ■#1D4ED8 にすると、■#DBEAFE に対して約5.49:1です。閉じた項目すべてを強い色にせず、開いている項目だけにアクセントを集めると状態を追いやすくなります。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2のUse of Colorでは、色を情報伝達の唯一の手段にしないことが求められます。開いた状態を青い背景だけで示さず、矢印を右向きから下向きへ変える、枠線を太くするなど、形の変化も併用します。Non-text Contrastでは、操作部品や状態を識別するために必要な視覚情報は、隣接色との3:1以上が基準です。

開閉状態はaria-expandedと矢印の向きをそろえる

W3CのAccordion Patternでは、各アコーディオン見出しの中に、関連パネルを開閉するボタンを置きます。パネルが開いているときはそのボタンの aria-expanded を true、閉じているときは false にし、aria-controls で対応するパネルを参照します。見た目の開閉状態とプログラム上の状態が一致するようにします。

たとえば閉じた状態ではブルーグレー ■#475569 の右向き矢印を白 ■#FFFFFF の背景に置くと約7.58:1です。開いた状態ではロイヤルブルー ■#1D4ED8 の下向き矢印をライトブルー ■#DBEAFE の背景に置くと約5.49:1です。色だけでなく矢印の向きも変わるため、開閉状態を確認しやすくなります。

Accordion Patternでは、見出しボタンにフォーカスがある状態でEnterまたはSpaceを押すとパネルを開閉する操作も示されています。アコーディオンの見出しは単なる装飾テキストではなく、内容を表示・非表示にする操作部品として扱います。

開いた本文とフォーカスを、状態色とは別に整理する

開いたパネルの本文背景は白 ■#FFFFFF、本文文字はブルーグレー ■#475569 にすると約7.58:1です。見出しだけを淡いアクセント背景にし、本文は通常の読み物と同じ配色に戻すと、開閉状態と本文の役割を分けやすくなります。

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

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