Primaryカラーはどこに使う？WEBサイトでの基本的な配置方法

Primary（プライマリー）カラーは、WEBサイトの中で最も重要な操作や現在地を目立たせるための基準色です。ブランドカラーと同じ場合もありますが、ページ全体をPrimaryで塗る必要はありません。基本は「主要CTA（Call To Action、ユーザーに最も取ってほしい行動を促すボタン）」「重要リンク」「現在選択中の状態」など、優先度の高い場所に絞って使います。

最優先のCTAにPrimaryを集中させる

たとえばページ背景をオフホワイト ■#F8FAFC、Primaryをロイヤルブルー ■#1D4ED8 にします。白い文字 ■#FFFFFF を載せたPrimaryボタンは約6.70:1、Primaryとページ背景の差は約6.41:1です。購入・送信・予約・保存など、その画面で最も重要な操作へ使うと優先順位を作りやすくなります。

一方、戻る・キャンセル・詳細を見るなどの補助操作まで同じ塗りボタンにすると、何を押すべきか分かりにくくなります。補助ボタンは白 ■#FFFFFF の背景にブルーグレー ■#475569 の文字を置くと約7.58:1です。必要ならスレートグレー ■#64748B の枠線を加えると白に対して約4.76:1です。Primaryだけを塗りにすることで、色だけでなく面の強さでも主従を分けられます。

現在地や選択中の状態にも、同じPrimary系統を使う

Material 3ではPrimaryは、目立つボタンだけでなくアクティブ状態など主要コンポーネントにも使われる色として説明されています。WEBサイトでも、現在のナビゲーション、選択中のフィルター、重要なアクティブ状態などにPrimary系統を使うと、操作の意味をそろえやすくなります。

たとえば選択中の背景をライトブルー ■#DBEAFE、文字をダークブルー ■#1E3A8A にすると約8.49:1です。状態を示す線やアイコンにPrimaryの ■#1D4ED8 を使うと、ライトブルー ■#DBEAFE に対して約5.49:1です。強いPrimaryを面全体へ広げず、淡い同系色と組み合わせると、CTAと選択状態の役割を分けやすくなります。

見出し・本文・背景までPrimaryにしない

Primaryを見出し、本文、アイコン、背景、すべてのリンクへ広げると、重要な操作が埋もれます。見出しはダークネイビー ■#0F172A、本文はダークブルーグレー ■#334155、背景はオフホワイト ■#F8FAFC のようにニュートラルを基本にし、Primaryは「行動してほしい場所」と「現在地」に集中させます。

また、W3CのUse of Colorでは、色を情報伝達の唯一の手段にしないことが求められます。現在地や選択状態をPrimaryだけで示さず、下線、太字、チェック、ラベルなど別の手掛かりも加えます。通常サイズの文字は背景とのコントラスト比4.5:1以上が基準です。

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