ブランドカラーが鮮やかすぎるときのWEB配色｜使いやすく調整する方法

ブランドカラーが鮮やかすぎて、WEBサイトの背景やボタンに使いにくいと感じることはありませんか。色を全面に広げると、商品写真や文字と競合する場合があります。ブランドの色を変えずに残し、表示する面積と補助色の役割を調整する方法を、花束の予約サイトを例に紹介します。

鮮やかな色を残し、使う面積と役割を見直す

最初にブランドカラーが使われている場所を整理します。ロゴ、見出し、ページ背景、申込ボタンがすべて同じ鮮やかな色なら、どこを先に見ればよいか迷いやすくなります。ブランドを識別する色はロゴや小さな装飾に残し、広い背景には白に近い色を使う方法があります。

彩度は色の鮮やかさを表す考え方です。鮮やかさを抑えた色を足す場合も、背景用の淡色と、文字やボタン用の濃色を別々に検討します。彩度を下げるだけで文字が読みやすくなるとは限りません。重要なのは、実際に隣り合う文字色と背景色の明るさの差です。

商品写真が色鮮やかなページでは、強いブランド色を大面積に置くより、写真の周囲を落ち着かせた方が商品を主役にしやすい場合があります。ただし、鮮やかな色が適する広さは用途や周囲の要素によって変わるため、固定の面積比率を正解とせず、同じレイアウトで比較しましょう。

花束の予約サイトで考える具体的な配色

架空の花束予約サイトで、鮮やかな赤みのピンク ■#FF315E がブランドカラーだとします。HEXコードは色を16進数で表す記法です。このピンクをロゴの一部や見出しの小さな装飾に残し、ページ全体の背景を温かみのあるオフホワイト ■#FBFAF8 にすると、写真と文章を分けて配置できます。

本文と見出しには濃い青灰 ■#263346 を使います。オフホワイト ■#FBFAF8 とのコントラスト比は約12.24:1です。鮮やかなピンク ■#FF315E を本文の文字色として使うと、同じ背景との比は約3.44:1で、通常文字の基準には届きません。ブランドカラーを文字のすべてに使う必要はありません。

予約の流れを説明するカードには淡いピンク ■#FFE8EF を使い、見出しを濃い青灰 ■#263346 にすると約10.97:1です。補足文は落ち着いたグレー ■#5C6676 にすると、カード背景との比は約4.99:1になります。鮮やかな色と近い色合いを少量取り入れつつ、長い文章の背景を強い色にしない構成です。

「花束を予約する」の主要ボタンには、ブランドカラーから暗めに調整した赤紫 ■#A62547 と白文字 ■#FFFFFF を組み合わせます。文字のコントラスト比は約7.05:1です。元の鮮やかなピンク ■#FF315E に白文字 ■#FFFFFF を載せると約3.59:1で、規定の大きな文字なら3:1を超えますが、通常のボタン文字に必要な4.5:1には届きません。

補助的な「内容を確認する」ボタンは、オフホワイト ■#FBFAF8 の背景に赤紫 ■#A62547 の文字と枠線を使うと約6.76:1です。主要ボタンを塗りつぶし、補助ボタンを枠線で表現すると、同じ色系統でも操作の優先順位を分けられます。

表示面積とコントラストを最終確認する

候補を比較するときは、鮮やかな色を多く使った案と、ロゴや装飾に限定した案を同じ写真・文章・ボタン位置で並べます。特にスマートフォンでは写真と色面が近くなるため、申込ボタンが見つけやすいか、商品名と価格が読み取りやすいかを確かめましょう。

WCAG（Web Content Accessibility Guidelines、WEBコンテンツを利用しやすくするための指針）2.2のAA（適合レベルの一つ）では、通常文字と背景のコントラスト比は4.5:1以上、規定の大きな文字は3:1以上です。操作に必要な輪郭やアイコンなどの非テキスト情報にも、隣接色との3:1以上が求められる場合があります。数値は不透明な単色同士の計算結果であり、写真や半透明の重なりにはそのまま使えません。

HueRollではHEXコードから色の濃淡や配色候補、選択色と白・黒とのコントラストを確認できます。ただし任意の2色同士の比較やAAの自動判定には対応していません。元の鮮やかな色はブランドの目印として残しながら、背景・本文・主要操作にはそれぞれの役割に合う色を選んでください。