Secondaryカラーはどう決める？Primaryを邪魔しない配色のコツ

Secondary（セカンダリー）カラーは、Primary（プライマリー）カラーほど強く主張させず、補助的な操作や分類、情報のまとまりに色を加えるための役割です。「Primaryの次に目立つ色」を作るのではなく、Primaryが示す最重要の操作を邪魔しないことを優先します。色相だけで決めず、どの部品に・どの面積で・どの強さで使うかまでセットで考えると整理しやすくなります。

先に「Primaryより低い優先度」という役割を固定する

たとえば、主要CTA（Call To Action、ユーザーに最も取ってほしい行動を促すボタン）にブルー ■#1D4ED8 を使い、文字を白 ■#FFFFFF にすると、コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約6.70:1です。Primaryは購入・送信・保存など、その画面で最も重要な操作へ集中させます。

Secondaryにはティール ■#0F766E を使い、フィルターチップや補助的な操作、カテゴリ表示などPrimaryより優先度の低い部品へ割り当てる例があります。白 ■#FFFFFF に対して約5.47:1です。Material 3でも、Secondaryはフィルターチップなど比較的目立たせすぎないUI部品に使う色として説明されています。

ただし、PrimaryとSecondaryを同じ大きさの塗りボタンで並べ、同じ回数だけ繰り返すと、色が違っても優先順位が曖昧になります。Primaryは強い塗り、Secondaryは小さな部品や淡いコンテナなど、使い方の強さにも差を付けます。

Secondaryは色相より「トーンと面積」で控えめにする

SecondaryをPrimaryと似た色相にする必要はありません。ブランドに合う別の色相でも、彩度・明るさ・面積を調整すれば補助役にできます。たとえばSecondaryの小さなコンテナ背景をミント ■#CCFBF1、文字をダークティール ■#115E59 にすると約6.73:1です。Primaryの濃いブルーより面の強さを下げながら、補助情報をまとめられます。

必要な枠線や状態アイコンにティール ■#0F766E を使うと、ミント ■#CCFBF1 に対して約4.86:1です。一方、ミント ■#CCFBF1 と白 ■#FFFFFF の差は約1.13:1しかありません。淡い背景色だけで選択状態や操作部品を識別させず、文字・アイコン・必要な枠線なども組み合わせます。

HueRollの60–30–10 Paletteでは、Secondary / Supportingを約30%の役割として示す候補があります。これはピクセル数を厳密に30%へそろえる規則ではなく、Primary / Accentより広く使っても視線を奪いすぎない補助色を考える出発点です。HueRollのガイドでも、類似色、彩度を抑えた色、ニュートラルなどが用途に応じたSecondary候補として挙げられています。

PrimaryとSecondary同士ではなく、実際に接する背景との比を確認する

PrimaryとSecondaryの2色同士に、WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が一律のコントラスト比を求めているわけではありません。確認すべきなのは、文字とその背景、状態アイコンと隣接色、操作部品の識別に必要な境界など、実際に情報を伝える組み合わせです。通常サイズの文字は背景との4.5:1以上が基準です。

また、W3CのUse of Colorでは、色を情報伝達の唯一の手段にしないことが求められます。Secondaryを選択中の状態に使う場合も、ティールに変えるだけでなく、チェックマーク、太字、ラベルなど別の手掛かりを加えます。

HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、ティント・シェード、配色候補、60–30–10 Palette、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、Primary・Secondary・背景・文字の実際の組み合わせは別途確認します。