ブランドカラーが暗いときのWEBデザイン｜明るい補助色の選び方

ブランドカラーが濃い色だと、WEBサイトの背景やボタンにもその色を広く使いたくなるかもしれません。しかし、暗い面積が増えるほど、写真や説明文、操作ボタンが埋もれることがあります。ブランドの色を変えずに、明るい補助色で画面を整える方法を、具体的な配色例から考えます。

暗いブランドカラーを残し、広い面は明るくする

ブランドカラーは、ロゴや重要な見出し、主要操作などでサイトを識別する手掛かりになる色です。画面の大部分をその色で塗る必要はありません。まずロゴ、ナビゲーション、ボタンのどこに使うか決め、背景や説明カードには明るい補助色を割り当てます。

補助色を選ぶときは、暗いブランドカラーの色相（青や赤など色の種類）に近い淡色と、白やクリーム色のような控えめな色を比べます。近い色相ならつながりを作りやすく、少量の温かい淡色は案内欄などを区別する候補になります。ただし色の印象は用途や周囲の写真でも変わるため、実際のレイアウトで見比べましょう。

明るい補助色は背景や情報の区切りを担当し、暗いブランドカラーは文字や操作の目印に使うと役割を整理できます。淡色だけで操作可能なカードの境界を作ろうとせず、必要に応じて余白や線、文字ラベルも組み合わせます。

濃いネイビーを使った企業サイトの配色例

架空の企業向け相談サービスを例にします。ブランドカラーは濃いネイビー ■#27324E、ページ全体の背景は温かみのあるオフホワイト ■#FCFAF6 にします。ブランドカラーを見出しやナビゲーション文字に使う場合、オフホワイトとのコントラスト比は約12.19:1です。HEXコードは色を16進数で表す記法です。

サービス説明のカードには淡い青灰 ■#E8EFF5 を使います。本文を濃い青灰 ■#253348 にすると、カード背景との比は約11.00:1です。ネイビーと近い青みを淡く取り入れることで、ブランドカラーを背景全体に広げずに色のつながりを作れます。

カードの補足文や小さなリンクには青灰 ■#4C6080 を使うと、淡いカード背景 ■#E8EFF5 との比は約5.50:1です。情報を弱く見せても文字が読めるよう、明るさの差を確保します。リンクなら下線も付け、色だけでクリックできることを伝えないようにします。

相談までの流れを案内する小さな欄には、淡いゴールド ■#F5DFB8 を使い、文字はネイビー ■#27324E とします。文字と背景の比は約9.76:1です。青系を中心とした画面に黄みのある補助面を少量加えますが、注意や強調の意味は見出しにも書き、色だけに頼りません。

主要な「無料相談を申し込む」ボタンは、ネイビー ■#27324E の背景に白文字 ■#FFFFFF を組み合わせると約12.71:1です。淡いページ背景 ■#FCFAF6 上で暗いボタンを使えば、背景を濃色で埋めなくても操作の位置を明確にできます。暗いブランド色の短い見出し帯を設ける場合は、淡いゴールド ■#F5DFB8 のボタンとネイビー ■#27324E の文字に切り替える案もあります。

淡い色の見分けやすさと文字色を確認する

文字を薄くしすぎると、同じ色でも置く場所によって基準を下回ります。例えばグレー ■#65718A の文字はオフホワイト ■#FCFAF6 上で約4.70:1ですが、淡い青灰 ■#E8EFF5 上では約4.23:1です。カード内の通常文字には足りないため、青灰 ■#4C6080 など濃い文字色へ調整します。

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

スマートフォンでも、見出し、説明カード、主要ボタンが見つけやすいか確かめます。写真の上に色面を重ねる場合や、半透明の装飾を使う場合は実際の重なりで再検証します。HueRollではHEXコードを入力して色の濃淡や配色候補、選択色と白・黒とのコントラストを確認できます。ただし任意の2色の比率やAAの自動判定には対応していません。ブランドカラーを保ちながら、背景・文字・操作の役割で補助色を選びましょう。