ロゴがオレンジのWEBサイトに合う配色は？明るさを活かす色合わせ

オレンジのロゴは明るさと彩度（色の鮮やかさ）が高い場合が多いため、WEBサイト全体まで同じ強さの色で埋めるより、背景と文字を落ち着かせた方がロゴの存在感を活かしやすくなります。ここでは、オレンジ ■#F97316 のロゴを例に、白・クリーム・濃いネイビーを組み合わせる方法を考えます。

オレンジのロゴには、明るい背景と濃い文字色を合わせる

大面積の背景には、白 ■#FFFFFF や、わずかに暖かいクリーム ■#FFF7ED のような明るい色が使いやすいです。ロゴ以外の大きな面まで鮮やかな色にしないことで、オレンジ ■#F97316 をブランドの目印として残しやすくなります。本文はネイビー寄りの濃色 ■#172033 やチャコール ■#1F2937 で支えると、背景との明暗差を確保できます。

チャコール ■#1F2937 は白 ■#FFFFFF に対して約14.68:1、クリーム ■#FFF7ED に対して約13.83:1のコントラスト比です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上が必要です。ロゴやブランド名そのものは文字コントラスト要件の例外ですが、本文やナビゲーションは別に確認します。

予約サービスでは、オレンジをロゴと主要CTAに絞る

予約サービスのトップページを例にします。ヘッダーと本文背景は白 ■#FFFFFF、料金や特徴をまとめる補助セクションはクリーム ■#FFF7ED、本文はネイビー ■#172033 とします。ロゴのオレンジ ■#F97316 を主要CTA（Call to Action、予約や申込みなど次の行動へ進むためのボタン）の背景にも使うなら、文字をネイビー ■#172033 にするとコントラスト比は約5.80:1です。

一方、同じオレンジ ■#F97316 に白文字 ■#FFFFFF を載せると約2.80:1で、通常サイズの文字に必要な4.5:1を満たしません。白文字を使いたい場合は、ブランドガイドラインで許容される範囲でボタンだけを濃いオレンジ ■#C2410C にすると、白文字 ■#FFFFFF との比は約5.18:1になります。ロゴ色をそのままUIへコピーするのではなく、用途に合わせて文字色または背景色を調整することが大切です。

ロゴ色をリンクや小さい文字へそのまま広げない

オレンジ ■#F97316 は白 ■#FFFFFF に対して約2.80:1なので、通常サイズのリンク文字や補足文字としてそのまま使うにはコントラストが不足します。リンクへオレンジ系を使うなら、より濃いブラウン寄りのオレンジ ■#9A3412 にすると白背景との比は約7.31:1です。色だけでリンクだと伝えず、下線など別の手掛かりも併用します。

写真の上にロゴを置く場合は、画像全体ではなくロゴ直下の明るさを確認します。オレンジに近い夕景や料理写真では一部がなじみすぎることがあるため、白 ■#FFFFFF のヘッダー面を保つなど、ロゴ周辺の背景を安定させる方法もあります。

HueRollでは候補色のHEX（#で始まるWEBカラーコード）を入力し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、この記事で示した本文やCTAの2色同士の比率は別途確認した値です。