力強いWEBデザインを作る配色｜濃色と高彩度カラーの使い方

力強いWEBデザインを作りたいとき、濃い背景に鮮やかな色をたくさん載せると、どこを見ればよいか分かりにくくなる場合があります。濃色を土台にして高彩度カラーを使う場所を限定すると、勢いのある印象を目指しながら文字や操作も整理できます。架空のナイトラン大会の参加申込みページを例に、色の役割と注意点を紹介します。

濃色を土台にし、高彩度カラーは役割を絞る

濃色とはここでは明るさを抑えた暗い色、高彩度カラーとは鮮やかさの強い色です。明るさを「明度」、鮮やかさを「彩度」と呼びます。暗い色を画面の大部分に使う場合、見出しや本文には十分明るい色を組み合わせ、申込みボタンなど本当に強調したい場所に高彩度色を使います。

たとえば大会の見出しと概要は暗い青灰を背景にし、申込みボタンに鮮やかなオレンジを割り当てます。黄緑はコースの短い案内バッジに使い、何を表すかを文字でも示します。オレンジも黄緑もすべての見出しや飾りに広げると、参加申込みの優先度が伝わりにくくなるためです。

暗い背景同士の差が小さい場合は、見出しや余白でカードを整理します。力強い印象を色だけに頼らず、文字の大きさや配置と合わせて作ることが大切です。

ナイトラン大会の参加申込みページの配色例

夜に街中を走る架空の5kmランイベントで、開催概要、参加条件、コース案内、申込みフォームを掲載する場合を考えます。HEX（ヘックス）は赤・緑・青の成分を16進数で表すカラーコードです。次は実際の大会の指定色ではなく、各部品の役割を示す提案です。

大きな見出しの文字■#F4F5F4とページ背景■#17212Bのコントラスト比は約14.91:1、本文■#E8EEF0とカード背景■#26343Eは約10.91:1です。補足文字■#BACAD2とカード背景■#26343Eでも約7.59:1になります。暗い背景でも、文字自体を暗くする必要はありません。

申込みボタンのオレンジ■#FF704Aとカード背景■#26343Eの比は約4.67:1、ボタン内の濃い文字■#14212Bとオレンジ■#FF704Aは約5.98:1です。黄緑のコースバッジ■#E5F34Bとその文字■#14212Bは約13.46:1で、黄緑と暗いカードとの比も約10.50:1です。これらは指定した不透明な2色を計算した値です。

明るいボタンの白文字とフォームの枠線を確認する

高彩度のオレンジ■#FF704Aに白文字■#FFFFFFを載せると、コントラスト比は約2.74:1です。通常サイズの文字に求められる4.5:1に届かないため、この例ではボタン文字を濃色にしています。WCAG（WEBコンテンツを利用しやすくするための指針）では、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上が基準です。

操作部品を見分けるために必要な輪郭などの視覚情報は、隣接色とのコントラストを原則3:1以上で確認します。入力欄の輪郭■#8EAAB8とカード背景■#26343Eは約5.23:1です。一方、カード背景■#26343Eとページ背景■#17212Bは約1.27:1しかありません。カードの位置や区切りを色差だけで伝えず、余白・見出し・必要な輪郭も使います。

スマートフォンでは鮮やかなボタンやバッジが画面を占めすぎないか確認し、ホバー（ポインターを重ねた状態）やフォーカス（キーボード操作などで対象になった状態）は別に設計します。実際の表示では写真や透過色との組み合わせも再検証しましょう。濃色と高彩度色を組み合わせるときは、どこを強調するかを一貫させることがポイントです。