モノトーンのWEBサイトにアクセントカラーを加える方法
白・黒・グレーを中心にしたモノトーンのWEBサイトは、写真や文章を主役にしやすい配色です。ただし、どの要素も同じ濃さにそろえると、購入や予約などの重要な操作まで周囲に埋もれる場合があります。そこで役立つのがアクセントカラーです。今回は赤茶#A84430を差し色として使い、モノトーンのすっきりした印象を残しながら操作を見つけやすくする方法を考えます。HEXとはWEBの色を16進数で指定するコードです。
最初に目立たせる操作を決め、差し色を1つに絞る
ここでいうモノトーンは、色相（赤・青などの色み）を持たない白・黒・グレーによる配色です。アクセントカラーは、その無彩色の中へ少量加える色を指します。まず「このページで最も押してほしいもの」を決めましょう。商品購入なら「カートに入れる」、イベントなら「予約する」など、主要な操作を選ぶと差し色の役割が明確になります。
商品名・本文・価格・補足情報はグレーの濃淡で整理し、主要ボタンだけにアクセントを使います。同じページのリンクや小さなバッジもすべて差し色にすると、どこが重要なのか再び分かりにくくなります。リンクには下線を付け、重要な文字は太さや配置でも区別しましょう。
差し色を選ぶときは、彩度（鮮やかさ）だけでなく明度（明るさ）の差を確認します。周囲の色との明暗差が不足すると、色みは違ってもボタンの輪郭を見つけにくくなるためです。
中古カメラの商品詳細ページに加える配色例
商品写真、状態、付属品、価格、購入ボタンを掲載するページを想定します。写真と情報を見せる面は無彩色だけにし、購入操作にだけ赤茶を使う構成です。
- ヘッダー：濃いグレー#242424を背景に白#FFFFFFでサイト名とメニューを表示します。文字と背景のコントラスト比は約15.52:1です。
- ページ背景と本文：薄いグレー#F5F5F5に暗いグレー#292929を合わせます。文字と背景は約13.34:1です。長い商品説明にもこの組み合わせを使います。
- 商品写真のカード：白#FFFFFFのカードに暗いグレー#292929で商品名と価格を表示すると約14.55:1です。白#FFFFFFとページ背景#F5F5F5の差は約1.09:1と小さいため、枠線や余白でカードを区切ります。
- 仕様・付属品の案内：明るいグレー#EEEEEEの面に暗いグレー#292929で説明すると約12.54:1です。補足文字に中間のグレー#555555を使う場合も、ページ背景#F5F5F5と約6.84:1の差があります。
- カードと入力欄の境界：グレー#777777の線を使います。白#FFFFFFに対して約4.48:1、案内面のグレー#EEEEEEに対して約3.86:1の差があります。
- 「カートに入れる」ボタン：赤茶#A84430を背景に白#FFFFFFで文字を表示します。文字とボタンは約5.94:1、ボタンとページ背景#F5F5F5は約5.45:1です。購入操作をこの色に絞ります。
- その他の操作：「配送条件を見る」などは暗いグレー#292929の下線付きリンクにし、白#FFFFFFのカード上では約14.55:1の文字コントラストを確保します。
赤茶は購入ボタンの背景にだけ使い、「在庫あり」「売り切れ」は文字で状態を示します。購入操作と在庫情報を色だけで区別しようとしないことで、画面全体の役割が整理されます。
暗い背景では、アクセントを使い回さず再確認する
同じ赤茶#A84430をヘッダーの濃いグレー#242424の上へ置くと、面同士の比率は約2.61:1です。明るい商品ページ上で目立つボタンでも、暗いヘッダーでは輪郭を見失うおそれがあります。ボタン色を機械的に使い回さず、ヘッダーでは白#FFFFFFの下線付きリンクなど、周囲から区別できる別の表現を検討します。
また、案内面のグレー#EEEEEEとページ背景#F5F5F5の差は約1.06:1です。セクションの区切りを面の色だけで示さず、見出しや余白、必要に応じて境界線を使います。薄い赤茶#D89482を白#FFFFFFの上に置いた場合も約2.48:1なので、重要な小さい文字や状態アイコンには向きません。
WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。入力欄の輪郭など、操作の識別に必要な非テキスト情報は隣接色と3:1以上が基準です。スマートフォンでもボタンと写真の位置、枠線、リンクの下線を確認しましょう。
HueRollではHEXコードを指定して関連色を調べ、選択色と白・黒とのコントラストを確認できます。ただし任意の2色の比較やAA・AAAの自動判定には対応していません。この記事で示した色同士の比率は別途計算しました。