ロゴが青いWEBサイトに合う配色は？背景・文字・アクセントの決め方

青いロゴはWEBサイトで使いやすい一方、背景やボタンまで青でそろえると画面全体が単調になり、ロゴと操作色の役割が重なりやすくなります。基本は、ロゴの青を基準にしつつ、背景は白や淡い青みのグレー、本文は濃い無彩色、アクセントは青とは異なる色に分けることです。ここでは青 ■#2563EB のロゴを例に考えます。

青いロゴには、白や淡いブルーグレーを背景にする

大面積の背景には、白 ■#FFFFFF や淡いブルーグレー ■#F4F7FB のような低彩度の色が使いやすいです。彩度とは色の鮮やかさの度合いです。背景まで鮮やかな青にすると、ロゴとの境界が弱くなったり、ページ全体で青の面積が増えすぎたりするため、まずは明るい背景でロゴの役割を分けます。

青 ■#2563EB と白 ■#FFFFFF のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約5.17:1、ブルーグレー ■#F4F7FB では約4.81:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）ではロゴやブランド名そのものは文字コントラスト要件の例外ですが、同じ青を通常サイズの文字へ使う場合は実際の背景との比率を確認します。

本文は濃いグレー、主要CTAは少し濃い青にする

企業のサービスサイトを例にします。ヘッダーと主要コンテンツは白 ■#FFFFFF、補助セクションはブルーグレー ■#F4F7FB、本文はチャコール ■#1F2937 とします。チャコールは白背景に対して約14.68:1、ブルーグレーに対して約13.66:1なので、長い文章でも十分な明暗差を確保できます。

CTA（Call to Action、問い合わせや申込みなど次の行動へ進むための主要ボタン）は、ロゴより少し暗い青 ■#1D4ED8 を背景にし、文字を白 ■#FFFFFF にすると約6.70:1です。通常サイズの文字に必要な4.5:1以上を満たします。ロゴとボタンを同じ青系にしながら、明度差で役割を分ける方法です。

アクセントカラーは、青と競合しない用途に限定する

青以外の色を追加するなら、面積を小さくし、役割も限定します。たとえば暖色のアンバー ■#B45309 は、白 ■#FFFFFF に対して約5.02:1、ブルーグレー ■#F4F7FB に対して約4.67:1です。価格の補足、限定ラベル、短いリンクなどに使えば、主要CTAの青と区別しながらアクセントを加えられます。

ただし、リンクや状態を色だけで伝えないようにします。リンクには下線、注意表示にはアイコンや文言を併用し、色が見分けにくい状況でも意味が残るようにします。また、写真の上に青いロゴを置く場合は、空や水面など青い部分と重なる場所を避け、必要なら白 ■#FFFFFF のヘッダー面を固定してロゴ周辺の背景を安定させます。

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