赤とネイビーを合わせるコツ｜明るい背景で2色を使い分ける

赤とネイビーをWebページで一緒に使うと、落ち着いた情報整理と目立たせたい案内を両立できます。しかし、見出し・背景・ボタンを両方の濃色で埋めると、画面が重くなり、どこを先に見ればよいか迷いやすくなります。明るい背景を広く取り、ネイビーを情報の軸、赤を限られた強調に使うのが一つの方法です。市民講座の申込みページを例に二つの配色を比べます。

ネイビーを読むための色、赤を行動のための色に分ける

まず、ページに載せる情報を「講座名・日時・説明」と「申込みなどの行動」に分けます。ネイビーは見出しや案内のまとまりに、赤は申込ボタンや締切の文字に限定します。二色を同じ面積で交互に配置する必要はありません。背景に明るい色を使えば、どちらの濃色も小さな面積で役割を持たせられます。

この記事ではネイビーを■#243750、赤を■#B53643として考えます。HEXコードは、Webの色を「#」と6桁などの英数字で表す方法です。赤とネイビーは色相、つまり赤系・青系といった色みが違っていても、暗い色同士では明るさの差が足りないことがあります。文字をどちらの色の上に置くかまで決めておきましょう。

市民講座の申込みページで比べる2つの配色

温かみのある白背景にネイビーの見出しと赤いボタン

ページ背景をオフホワイト■#FAF7F2、講座名をネイビー■#243750、説明文を濃いグレー■#333943にします。背景とのコントラスト比は、見出しが約11.31:1、本文が約10.87:1です。日時や会場などの補足は少し控えめな■#4B5665にしても約6.97:1あり、文字の優先順位を分けられます。

「講座に申し込む」ボタンだけを赤■#B53643の塗りつぶしにし、文字は白■#FFFFFFにします。ボタン内の文字は約5.88:1、赤いボタンと周囲のオフホワイト■#FAF7F2は約5.50:1です。締切も強調したい場合は、赤■#AF3544で「申込締切：○月○日」と文字で明示します。この赤い文字と背景の比は約5.75:1です。色だけで締切の意味を伝えないことが大切です。

淡い青みの背景に白い案内カードを並べる

講座が複数ある一覧では、ページ背景を薄い青灰色■#EFF3F7、講座ごとのカードを白■#FFFFFFにする方法もあります。背景とカードの比は約1.12:1と小さいため、カードの輪郭が必要ならグレー青■#64748Bの細い枠線を加えます。この線は外側の背景と約4.27:1、白いカードと約4.76:1の差になります。

カードの見出しはネイビー■#243750、説明文は濃いグレー■#333943に統一します。白いカードとの比はそれぞれ約12.09:1、11.62:1です。申込ボタンは前の案と同じ赤■#B53643と白文字■#FFFFFFを使い、複数のカードでも同じ操作に同じ色を割り当てます。赤いボタンと白いカードの比も約5.88:1なので、カード内の操作位置を見つける手掛かりになります。

赤をネイビーの上に重ねず、文字と状態を確認する

赤■#B53643の文字をネイビー■#243750の背景に直接載せると、コントラスト比は約2.06:1です。色みは異なっても、通常サイズの文字として十分な明暗差はありません。ネイビーの帯に文字を置くなら、白■#FFFFFFに変更すると約12.09:1となります。赤は明るい背景上の文字や、白文字を載せたボタンとして使い分けます。

WCAG（Web Content Accessibility Guidelines、Webコンテンツの利用しやすさに関する指針）2.2のレベルAAでは、通常サイズの文字に背景との4.5:1以上、規定の大きな文字に3:1以上が必要です。操作部品の識別に欠かせない輪郭などの非テキスト情報にも、隣接色と3:1以上の差が原則求められます。今回の比率は指定した不透明な色同士を別途計算した値で、ページ全体の適合を保証するものではありません。

スマートフォンでは、講座名・日時・申込ボタンの順に内容が追えるかを確認します。受付終了などの状態は赤い色だけで示さず、「受付終了」と明記してください。HueRollではHEXコードから色の濃淡や配色候補を調べ、選択色と白・黒のコントラストを確認できますが、任意の二色の比較やAA判定は自動ではできません。背景を明るく保ち、ネイビーと赤それぞれの役割を固定すると、情報を整理しやすくなります。