黄色と黒のバナー配色｜背景を入れ替えるとどう見える？

黄色と黒は明るさの差が大きく、バナーの背景をどちらにするかで情報の目立ち方が変わります。黄色を広く敷けば画面全体に明るさが出やすく、黒を広く使えば黄色い見出しやボタンに視線を集める構成を作れます。同じ「週末マーケット」の告知内容を使って、背景だけでなく文字と操作部分もどう入れ替えるか比較します。

黄色を広く使うか、黒を広く使うかで主役が変わる

今回は明るい黄色■#FFD54Fと、黒に近い■#181818を基準にします。HEX（ヘックス）カラーコードとは、「#」と英数字で画面上の色を指定する形式です。ここでは6桁のコードで示します。黄色と黒の色そのものは変えず、配置する面積と役割を入れ替えるのが今回の比較です。

黄色■#FFD54Fを大きな背景にすると、色のある面全体が目立つため、見出し・日時・ボタンは黒■#181818で形をはっきりさせます。反対に黒■#181818を広く使うと、黄色■#FFD54Fの文字やボタンが限られた場所に現れ、注目する位置を絞りやすくなります。どちらが必ず目立つとは決めず、掲載する写真や文字量も見て選びます。

同じ週末マーケットの告知を2つの背景で比較

例1：黄色背景でイベント全体を明るく見せる

「週末マーケット開催」というバナーでは、背景の大部分を黄色■#FFD54Fにし、見出し・開催時間・会場名を黒■#181818で表示します。出店内容をまとめる欄には生成り■#FFF9E8を使い、欄内の文字も黒■#181818にします。出店情報へ案内する「出店一覧を見る」ボタンは黒■#181818で塗り、文字を黄色■#FFD54Fにすると、周囲の背景とボタンを区別できます。

ただし黄色■#FFD54Fと生成り■#FFF9E8は明るさが近く、色の差だけで重要な情報欄の境界を表すには不十分です。情報欄が独立したカードだと伝える必要がある場合は、黒■#181818の枠を付けるか、見出しと余白で領域を明確にします。

例2：黒背景で見出しとボタンに黄色を集める

イベント名や日時を変えずに、背景を黒■#181818に切り替えます。見出しは黄色■#FFD54F、開催時間と会場名は生成り■#FFF9E8にし、見出しだけを強く見せます。出店内容の欄には暗いグレー■#343434を使い、欄内の文字を生成り■#FFF9E8にします。「出店一覧を見る」ボタンは黄色■#FFD54Fで塗り、文字を黒■#181818にすれば、例1とは反対の色配置で操作部分を見せられます。

暗いグレー■#343434と黒■#181818の面は似て見えるため、カードの境界が操作や情報の理解に必要なら、黄色■#FFD54Fの枠を補います。黒背景で説明文まですべて黄色にすると強調箇所が増えるので、黄色は見出しとボタンに絞るのが一案です。

入れ替えた後も文字と境界のコントラストを確認

コントラスト比は、文字と背景など隣り合う色の明るさの差を表す数値です。Webコンテンツのアクセシビリティ指針「WCAG 2.2」のAA基準では、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が必要です。黄色■#FFD54Fと黒■#181818の比は約12.58:1で、背景と文字を入れ替えても比は同じです。生成り■#FFF9E8と黒■#181818も約16.88:1で、どちらも通常文字の基準を満たします。

一方、黄色■#FFD54Fと白■#FFFFFFは約1.41:1、黄色■#FFD54Fと生成り■#FFF9E8も約1.34:1で、通常文字にも大きな文字にも適しません。さらに暗いグレー■#343434と黒■#181818は約1.43:1です。操作に必要な枠やアイコンなど、意味のある文字以外の要素は、隣接する色と原則3:1以上を確認しましょう。黄色■#FFD54Fと暗いグレー■#343434なら約8.82:1です。

同じ数値でも、色の面積や写真との位置関係で見え方は変わります。HueRollで確認できるのは選択色と白・黒とのコントラストだけです。今回のような任意の2色の比較やAAの自動判定はできないため、実際に隣り合う色を別途計算してからバナーに使ってください。