ネイビーとベージュの配色｜背景と見出しの色を入れ替えて比較

ネイビーとベージュは、同じ2色でもどちらを背景にするかで画面の見え方が変わります。ベージュ背景にネイビーの見出しを置く場合と、ネイビー背景にベージュの見出しを置く場合では、情報を目立たせる順序も考え直したいところです。架空のイベント「週末の器市」の告知を例に、文字・背景・ボタンまで色を入れ替えて比較します。

ネイビーとベージュは、背景の明るさを先に決める

今回使う色は、深い青のネイビー■#243B56と、黄みを含んだ明るいベージュ■#E8D8BEです。HEX（Webの色を16進数で表すコード）は配色例として選んだ値で、日常的な色名がこの2つのコードに限定されるわけではありません。

ネイビーは暗く落ち着いた色、ベージュは明るく柔らかい色として組み合わせられます。ベージュを大きく敷けばネイビーの見出しが画面を引き締め、ネイビーを大きく敷けばベージュの文字やボタンが明るく浮かぶ構成になります。印象はサイトの内容や写真によっても変わるため、どちらが常に優れているというものではありません。

この2色のコントラスト比（隣り合う色の相対的な明るさの差を表す数値）は約8.17:1です。文字色と背景色を反対にしても比率は同じですが、広い面を暗くするか明るくするかで視覚的な重さは変わります。

同じ告知を使って背景と見出しを入れ替える

1. ベージュ背景 × ネイビー見出し：内容を順に読ませる

背景をベージュ■#E8D8BEにし、見出し「週末の器市」と説明文をネイビー■#243B56にします。「開催案内を見る」ボタンはネイビー■#243B56の塗りに、文字をベージュ■#E8D8BEにして2色でまとめます。

明るい背景が画面の大部分を占め、濃い見出しとボタンが要所に置かれる構成です。商品写真や開催内容を複数並べるページの導入部分など、説明を続けて配置したい場面で試せます。見出し・本文・ボタン文字の各組み合わせは、いずれも約8.17:1です。

2. ネイビー背景 × ベージュ見出し：告知を一つの面として強調する

同じ文章のまま、背景をネイビー■#243B56、見出しと説明文をベージュ■#E8D8BEに入れ替えます。ボタンはベージュ■#E8D8BEの塗りにネイビー■#243B56の文字を載せます。色の役割をすべて反転させ、配色以外の条件をなるべく揃えて比較する例です。

暗い背景が一つの大きな面になるため、見出しとボタンがまとまった告知として目に入る構成です。限定イベントの案内や短いメッセージを中心にするバナーで試せます。こちらも文字と背景、ボタン文字と塗りの比は約8.17:1ですが、長い説明を詰め込まず余白を確保すると整理しやすくなります。

見出しを入れ替えたあとに確認したい点

まず、見出しの強さを色だけで判断しないことが大切です。ネイビー背景にベージュの文字を大量に置くと、見出しと説明文の差が弱くなる場合があります。見出しには大きさや太さを、本文には行間と余白を設けて、情報の順序を明確にします。逆にベージュ背景では、ボタンの濃い面積を広げすぎないことで本文よりも操作が強く見えすぎるのを防げます。

次に、実際の色の組み合わせを確認します。WCAG（Webコンテンツのアクセシビリティ指針）2.2のAA水準では、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上が基準です。操作部品を見分けるために必要な境界などの非テキスト情報には、隣接色との3:1以上が求められる場合があります。今回の2色は約8.17:1ですが、写真や半透明の色が間に入れば別の組み合わせとして確認が必要です。

HueRollではHEXコードで色を調整し、選択色と白・黒とのコントラストを確認できます。ただしネイビーとベージュのような任意の2色同士の比較やAA判定はできません。紹介した2色の比率は別途計算したものです。背景を反転したら、見出しだけでなく説明文・ボタン・写真との位置関係まで一緒に確認しましょう。