桜色を使う春のバナー配色｜文字や枠が埋もれない色合わせ

桜色は春の告知やギフトのバナーに取り入れやすい色ですが、背景も文字も淡くすると、伝えたい情報が埋もれがちです。囲み枠を付けても、周囲と明るさが近ければ境界が見えません。桜色を広い背景に使う案と、明るい背景の中の囲みに使う案を比べながら、文字と枠の色を整えます。

桜色の上では、文字と枠を別々に確認する

ここでは桜色を■#F7DFE6とします。「桜色」に決まったHEX（Webの色を16進数で指定するコード）が一つあるわけではなく、これは今回の配色用に選んだ例です。文字には深いプラム■#513746、枠とボタンには落ち着いたローズ■#925266、明るい余白には生成り■#FFF9F2を合わせます。

桜色と白■#FFFFFFのコントラスト比は約1.26:1なので、白文字をそのまま載せると目立ちません。薄いグレー■#D8C6CCの枠と桜色も約1.29:1で、境界がぼやけやすい組み合わせです。一方、プラムの文字と桜色は約8.39:1、ローズの枠と桜色は約4.60:1です。コントラスト比は、隣り合う2色の明るさの差を数値で表したものです。

桜色を使った春のバナー配色を2つ比較

桜色を全面に：イベントの文字と外枠を濃くする

春のイベントなら、バナー全体を桜色■#F7DFE6にし、見出しと日程などの説明文をプラム■#513746にします。囲みの外枠と案内ボタンはローズ■#925266、ボタン文字は生成り■#FFF9F2にします。淡い背景を広く取り、濃い色を文字・枠・操作に絞った構成です。

ローズの枠は桜色の内側と約4.60:1で区別できます。ボタンの生成り文字とローズ背景は約5.55:1です。

生成りを全面に：桜色のカードを枠で区切る

春のギフト紹介なら、広い背景を生成り■#FFF9F2に変え、桜色■#F7DFE6を商品案内の囲み部分だけに使います。見出しと説明文はプラム■#513746、囲み枠とボタンはローズ■#925266、ボタン文字は生成り■#FFF9F2です。桜色を使う面積が減り、贈り物の案内を一つのまとまりにできます。

桜色と生成りだけでは約1.21:1のため、囲みの輪郭は弱くなります。ローズの枠なら内側の桜色と約4.60:1、外側の生成りと約5.55:1です。プラム文字と生成り背景は約10.12:1、桜色背景とは約8.39:1です。

細い枠・文字サイズ・写真の重なりを最後に確認する

枠は色だけでなく太さも確認します。見本では2ピクセルの線を使っていますが、小さいバナーでは実寸表示で見直してください。飾りだけの枠に一律の数値基準はありません。一方、操作できる場所や情報の区切りを理解するために必要な線は、周囲と十分に見分けられる必要があります。

WCAG（Web Content Accessibility Guidelines：Webコンテンツのアクセシビリティ指針）2.2のAA（適合レベルの一つ）では、通常サイズの文字は原則4.5:1以上、規定の大きな文字は3:1以上が基準です。操作や図の意味を理解するために必要な非テキストの表示は、隣接色との3:1以上が必要です。写真や半透明の装飾を重ねる場合は、その場所の背景色で再確認します。

HueRollではHEX入力で色を調整し、選択色と白・黒のコントラストを確認できます。ただし任意の2色同士の比較やAA適合の自動判定には対応していません。ここに示した比率は別途計算したものです。春らしい淡さを残すには、背景を明るく保ち、読む文字と必要な枠には濃さを確保することがポイントです。