WEBサイトのブランドカラーを濃くして使う方法｜文字やナビへの展開例

ブランドカラーを文字やナビゲーションにも使いたいとき、ロゴや装飾に使っている色をそのまま流用すると、白背景ではコントラストが足りないことがあります。そんな場合は、ブランドの色相を基準にしながら、より暗い色へ展開します。ここでは明るめのブルーを例に、通常文字・リンク・現在地・濃色ナビへ使える濃い候補を作る考え方を説明します。

文字に使う前に、元のブランドカラーと白の比を確認する

基準のブランドカラーをブルー ■#3B82F6 とします。この色を白 ■#FFFFFF 上の通常サイズ文字にすると、コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約3.68:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字は4.5:1以上が基準なので、この組み合わせでは足りません。

そこで、文字やリンク用の濃い候補としてロイヤルブルー ■#1D4ED8 を使うと、白 ■#FFFFFF に対して約6.70:1になります。さらに濃いネイビーブルー ■#1E3A8A なら約10.36:1です。ロゴや大きな装飾では元のブランドカラーを保ち、機能的な文字だけ濃い派生色へ分けると、ブランドのつながりと読みやすさを両立しやすくなります。

HueRollでは、Shade（シェード、基準色に黒を加えて暗くした色）を4段階確認できます。まずシェードで濃くする方向を比較し、必要なら3桁または6桁のHEXやカラーピッカーで調整します。

ナビでは「通常項目・現在地・濃色背景」で役割を分ける

白いナビゲーション背景では、通常項目をブルーグレー ■#475569 にすると、白 ■#FFFFFF に対して約7.58:1です。現在地だけをブランド由来の ■#1D4ED8 にすると、色の系統を保ちながら優先順位を付けられます。

ただし、現在地を青くするだけでは色だけが手掛かりになります。W3CのUse of Colorでは、色を情報伝達の唯一の手段にしないことが求められます。現在のページには下線、太字、背景形状など別の手掛かりも加えます。

ヘッダー全体を濃色にする場合は、ネイビーブルー ■#1E3A8A を背景にし、白い文字 ■#FFFFFF を置くと約10.36:1です。元の ■#3B82F6 をそのまま広い背景へ使うより、濃い派生色へ役割を分けると、白文字を使うナビでもコントラストを確保しやすくなります。

濃くするほど良いのではなく、用途ごとに段階を止める

ブランドカラーを暗くすると文字には使いやすくなりますが、すべてを最も濃い色へそろえると、見出し・本文・ナビ・リンクの強弱がなくなります。たとえばリンクや現在地には ■#1D4ED8、濃色ナビ背景や強い見出しには ■#1E3A8A のように、用途ごとに濃さを分けます。

HueRollのシェードは候補を作る出発点であり、生成された色が自動的にすべての用途でWCAGを満たすわけではありません。HueRollのコントラスト比較は選択色と白・黒に限られ、任意の2色比較やAA・AAA自動判定には対応していません。文字、ナビ背景、ホバーや現在地など、実際に接する前景色と背景色の組み合わせを個別に確認します。