Primaryカラーの濃淡は何段階必要？UIカラースケールの作り方

WEBサイトのボタンを青緑で統一したいとき、濃淡は何段階用意すればよいのでしょうか。Primary（プライマリー）カラーは、UI（ユーザーインターフェース：利用者が画面で行う操作）の中で、最も重要な操作などを目立たせるための基本色です。初めから10段階近く作る必要はありません。使う場所と操作状態を洗い出し、必要な濃淡だけを増やしていく方法を紹介します。

まず3段階から考え、役割が増えたら追加する

Primaryカラーの段階数に、すべてのサイトに共通する正解はありません。主要ボタンが中心の小さな画面なら、「通常時」「ポインターを重ねた時（Hover）」「押している間（Active）」の3色を出発点にできます。Hoverはマウスなどを重ねた状態、Activeはボタンを押している間の状態です。スマートフォンではHoverが常に使えるとは限りません。

一方、ファイル共有サービスのように、主要ボタンに加えて選択中のフォルダーや案内パネルも同じ色系統にしたい場合は、淡い背景用の色も必要です。キーボード操作で対象が分かるフォーカス表示も別に考えます。このように、操作・選択・背景の用途が増えたときに5〜6段階へ広げるのが一つの実務的な進め方です。数が多いほど品質が上がるわけではありません。

番号の50や500は色の濃さを整理するための名前で、明るさやコントラスト比を表す数値ではありません。必要な用途が同じなら中間の番号をすべて埋める必要もありません。

ファイル共有画面で6段階を割り当てる例

社内のファイル共有画面で、最も重要な「アップロード」操作に青緑系を使う例です。HEXコードは色を16進数の文字で指定する方法です。次の6色は提案用の独自パレットで、どこかの標準パレットの値ではありません。

通常のボタンは青緑 ■#147A73 を背景に白文字 ■#FFFFFF とし、コントラスト比は約5.17:1です。Hoverでは濃い青緑 ■#106860 に変え、白文字との比は約6.62:1、押している間はさらに濃い ■#0C514A にして約9.16:1になります。白い画面 ■#FFFFFF 上のテキストリンクは通常色 ■#147A73 と下線を使い、リンクだと色だけで判断させないようにします。

案内エリアの背景には淡い ■#EDF8F6、その文字には最も濃い ■#123B3B を組み合わせると約11.29:1です。選択中フォルダーの背景 ■#C9E7E1 と濃い文字 ■#123B3B は約9.33:1ですが、その背景と周囲の白 ■#FFFFFF の差は約1.31:1にすぎません。選択中だと分かる文字やチェック印を加え、必要な選択枠には ■#0C514A を使います。この枠と白との比は約9.16:1です。

キーボードで操作対象に移った際は、ボタンを暗くするだけで済ませず、フォーカスが分かる輪郭を用意します。例えば白い余白を挟んで ■#123B3B の輪郭を描くと、隣接する白 ■#FFFFFF との比は約12.25:1です。輪郭が他の色に接する画面では、その組み合わせも確認します。

足りない段階だけ追加し、隣接色を確認する

6段階を作った後でも、用途のない色を残す必要はありません。まず通常・Hover・Activeの3色を確認し、選択表示や淡い背景、濃い文字などで役割が足りない場合だけ追加します。色相が近いことにこだわるあまり、隣接した段階がほとんど見分けられなければ、明るさや鮮やかさの差を調整してください。

淡い背景 ■#EDF8F6 と白 ■#FFFFFF の比は約1.08:1です。背景の色差だけで重要な区切りを表すのは避け、余白や輪郭も使います。また、各ボタン色は白文字との組み合わせをそれぞれ確かめ、HoverやActiveでも文字が読める状態を保ちます。

WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2のレベルAAでは、通常文字は背景とのコントラスト比4.5:1以上、規定の大きな文字は3:1以上が基準です。操作部品や選択状態を認識するために必要な非テキスト情報にも、隣接色との3:1以上が求められます。これは通常色とHover色の差を必ず3:1以上にするという意味ではありません。掲載した数値は不透明な単色同士の計算値で、画面全体の適合を保証するものではありません。

HueRollではHEX入力やティント・シェードなどの濃淡候補、選択色と白・黒とのコントラストを確認できます。ただし任意の2色を直接比較したり、AA・AAAを自動判定したりする機能はありません。作った候補は実際の背景・文字・輪郭の組み合わせで別途検証し、必要な段階数に絞り込みましょう。