同じアクセントカラーでも面積で見え方が変わる？WEBでの使い分け

WEBサイトのアクセントカラーは、申込みボタンや大切な案内など、注目してほしい場所に使う色です。同じ色でも、小さな線として添えるときと、ボタンに塗るとき、背景いっぱいに広げるときでは、目立つ対象が変わります。色そのものを変える前に、どれくらいの面積で使うかを考えてみましょう。ここでは架空のオンライン説明会の申込みページを例に、3通りの使い分けを紹介します。

小さく使うと目印、大きく使うと区画全体が主役になる

アクセントカラーを見出しの横に細い線として置けば、その見出しに視線を向ける目印になります。申込みボタンの面全体に使えば、ボタンの形と文字が一体となって操作場所を示します。さらに案内欄の背景まで広げると、ボタンだけでなく欄全体に存在感が出ます。

面積を増やすほど必ず効果が高まるわけではありません。アクセントの背景が広いと、同じ色で塗ったボタンは背景に埋もれます。また、画面のあちこちに大きな色面を置くと、どこを優先すればよいのか判断しづらくなる場合があります。色の面積は、強調したい対象に合わせて選ぶのが基本です。

同じ赤茶色を3つの面積で使う配色例

説明会のページは、淡いグレー■#F5F7F8を外側の背景、白■#FFFFFFを情報カードの背景、濃い青灰色■#253342を本文の文字色とします。アクセントには赤茶色■#9E3E2Eを一色だけ使います。HEXは「#」の後に0〜9とA〜Fを6桁並べて色を表す方法です。本文の文字と白背景のコントラスト比（色の相対的な明るさの差）は約12.88:1、淡いグレー背景では約11.98:1です。

小：見出しの横の細い線に使う

「参加方法」の見出しの左に幅約4px（pxは画面上の長さを表す「ピクセル」という単位）の赤茶色■#9E3E2Eの線を置き、見出しの文字は濃い青灰色■#253342にします。白■#FFFFFFのカード上で、線と背景のコントラスト比は約6.60:1です。線は場所を示す補助とし、「参加方法」という文字だけでも内容が分かるようにします。線の太さは視認性を確認して調整する設計例で、4pxが決まりというわけではありません。

中：申込みボタンに使う

白■#FFFFFFのカードの中で、「説明会に申し込む」ボタンを赤茶色■#9E3E2Eの塗りつぶしにし、文字を白■#FFFFFFにします。文字とボタン背景のコントラスト比は約6.60:1で、ボタン面と周囲の白い背景も約6.60:1です。強調するのは一つの操作なので、補足説明や他のボタンまで同じ塗りつぶしにしない構成が考えられます。

大：申込み案内の背景に使う

ページ末尾の短い申込み案内を赤茶色■#9E3E2Eの背景にし、見出しと説明には白■#FFFFFFを使います。この文字と背景のコントラスト比は約6.60:1です。案内の中に置くボタンは白■#FFFFFFの背景と濃い青灰色■#253342の文字に切り替えれば、文字とボタンのコントラスト比は約12.88:1、白いボタンと赤茶色の周囲は約6.60:1になります。

この案は区画全体を目立たせたいときの選択肢です。ただし、同じ赤茶色をページのあちこちで大きな背景に使うと特別感が薄れることもあります。どの案も同時に採用する必要はありません。

色面を広げる前に、配置とコントラストを確認する

まず、説明会の日時・参加条件・申込みのうち、最優先で見てほしい情報を決めます。日時を探しやすくしたいなら小さな線、申込み操作を見つけやすくしたいならボタン、締めくくりの案内をまとめたいなら背景の帯、と目的から選びます。色だけで重要度を表さず、見出しやラベル、余白でも関係を伝えてください。

スマートフォンでは、大きな色付きの帯が最初の画面を占めすぎないか確認します。細い線は色の差が十分でも見落とす場合があるため、太さや位置も調整します。ボタンのホバー（マウスを重ねた状態）やフォーカス（キーボードで選択した状態）の見え方は、通常時とは別に確かめましょう。

WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字は背景と4.5:1以上、大きな文字は3:1以上のコントラスト比が原則です。操作に必要な形や状態の目印には、隣接色と3:1以上の基準が適用される場合があります。上の数値は不透明な指定色同士の計算結果です。透明度や写真を重ねた場合は、実際に接する色で再確認してください。