WEBサイトのカラースケールとは？同じ色の濃淡を設計する方法

WEBサイトでボタンやカードを同じ青系にそろえたいとき、使う場所ごとに適当な青を追加すると、似ているのに統一されていない画面になりがちです。そこで役立つのが「カラースケール」です。1つの基準色から明るい色と暗い色を段階的に用意し、用途に合わせて使い分ける考え方を、オンライン講座の一覧ページを例に説明します。

カラースケールは同じ色系統の明暗をそろえる仕組み

カラースケールとは、同じ色系統を保ちながら明るさや鮮やかさを変え、順番に並べた色の組です。背景、選択中の表示、リンク、主要ボタン、見出しにそれぞれ別の色を探すのではなく、共通の基準色から選べるようにします。ただし、段階が増えれば使いやすくなるわけではありません。

作るときは、まず中心にしたい色を1つ決めます。次に、その色より明るい候補と暗い候補をそれぞれ作り、最も明るい色から暗い色へ並べます。HSL（色相・彩度・明るさの成分で色を表す形式）を参考にすると調整の方向を考えやすくなりますが、HSLの明るさの数値を等間隔に動かしても、見た目の差が均等になるとは限りません。実画面で比較して調整します。

最後に「薄い色は背景」「中くらいの濃さはリンク」「濃い色は文字やボタン」のように役割を割り当てます。段階を先に大量に作るより、必要な使い道がある色だけを残すことが大切です。

青を5段階にして講座一覧ページへ割り当てる例

青 ■#3172A6 を基準に、淡い側と濃い側を2色ずつ加えた例です。HEXコードは、色を16進数の文字で表す指定方法です。次の5色は色相をおおむねそろえつつ、背景用と文字・操作用で明暗の幅を調整しています。

白 ■#FFFFFF のページに講座案内カードを置く場合、カードの背景は ■#EDF5FC にします。ただし、白とのコントラスト比は約1.10:1なので、この色差だけで重要な境界を示すのは避け、余白を取り、必要なら基準の青 ■#3172A6 の線を足します。この線とカード背景の比は約4.66:1です。

選択中のカテゴリタブを ■#B8D4EC の背景にするとき、文字を最も濃い青 ■#102F4A にすれば、比は約8.95:1です。選択中であることは色だけに頼らず、下線や「選択中」の表示も添えます。白背景の講座詳細リンクは ■#3172A6 と下線の組み合わせにし、白 ■#FFFFFF との文字コントラスト比は約5.14:1です。

「講座に申し込む」ボタンは濃い青 ■#1C4F78 を背景、白 ■#FFFFFF を文字とすると約8.61:1です。カードの見出しは最も濃い青 ■#102F4A と淡い背景 ■#EDF5FC の組み合わせで約12.48:1になります。このように同系色でも面の広さと用途を変えると、別の色相を増やさず情報を整理できます。

数値と使用場面を確かめて必要な段階だけ残す

薄い色は広い背景に使えても、白い文字を載せると読みにくくなることがあります。例えば淡い青 ■#B8D4EC と白 ■#FFFFFF の比は約1.54:1で、通常の文字の基準には足りません。選ぶ色は単独で判断せず、実際に隣り合う背景と文字を一組で確認してください。

WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2のレベルAAでは、通常文字は4.5:1以上、規定の大きな文字は3:1以上が基準です。操作部品を識別するために必要な線や状態表示などの非テキスト情報には、隣接色との3:1以上が求められる場合があります。今回の比率は不透明な単色同士の計算結果で、ページ全体の適合を保証するものではありません。

同じ画面に色を並べ、見た目が近すぎる段階や用途のない段階は削りましょう。パソコンだけでなくスマートフォンでの見え方も確かめます。HueRollではHEXコードの入力とティント・シェードなどの濃淡候補、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色を直接比較したりAA・AAAを自動判定したりする機能はないため、必要な組み合わせは別途検証します。