紅色と白茶を合わせる｜和風バナーの文字と背景の配色

紅色と白茶は、鮮やかな赤と穏やかな薄茶色を組み合わせる和風バナーの配色候補です。ただし、紅色を白茶の上に文字として置くと、色の違いはあっても十分な明るさの差を確保できません。この記事では「季節の和菓子詰め合わせ」の予約案内バナーを例に、どちらを背景にするかによって見出し・案内文・ボタンの色をどう変えるか説明します。

白茶背景の文字は紅色を少し暗くして選ぶ

紅色（べにいろ）は紅花の染料に由来する鮮やかな赤系の色です。今回の見本には紅色■#D7003Aを使います。白茶（しらちゃ）は白みを帯びた明るい茶色で、見本は■#DDBB99です。どちらも資料によって色見本が異なるため、この記事で採用する色をHEX（ヘックス：Webの色を6桁の英数字で示すコード）で明示します。

今回の紅色■#D7003Aと白茶■#DDBB99のコントラスト比は約2.95:1です。コントラスト比とは、文字などと背景との明るさの差を表す数値です。この組み合わせは通常サイズの文字だけでなく、大きな文字の基準である3:1にも届きません。色相（赤や黄といった色み）が違っていても、文字として見分けやすいとは限らないのです。

そこで、白茶の上では紅色そのものを見出し文字にせず、暗く調整した紅系の色■#6E2434を選びます。白茶■#DDBB99との比は約5.93:1です。一方、紅色■#D7003Aを背景にして白■#FFFFFFの文字を載せれば約5.32:1になります。背景と文字の役割を交換するときは、この2組を使い分けます。

和菓子の予約バナーで背景と見出しを入れ替える

案1：白茶を広い背景にする。「季節の和菓子詰め合わせ」という見出しと予約期間の説明を濃い紅系■#6E2434で表示し、背景を白茶■#DDBB99にします。文字と背景は約5.93:1です。紅色■#D7003Aは「数量限定」などの短い帯の背景に絞り、帯の文字を白■#FFFFFFにすると約5.32:1です。赤を広く使わず、注目してほしい言葉を帯の中に明記します。

「予約内容を見る」ボタンは白茶の上に濃い紅系■#6E2434の背景で置き、白■#FFFFFFの文字を載せます。ボタンの文字と背景は約10.69:1、ボタンと周囲の白茶■#DDBB99は約5.93:1です。見出しと操作部分を同じ暗い色にすると、色を増やさずに用途を分けられます。

案2：紅色を大きな背景にする。バナー上部を紅色■#D7003Aで塗り、「ご予約受付中」という見出しを白■#FFFFFFで載せます。文字と背景は約5.32:1です。同じ赤い面に置く「商品を見る」ボタンは白■#FFFFFFで塗り、文字を紅色■#D7003Aにします。ボタン内の文字と背景、ボタンと周囲の赤い面は、どちらも約5.32:1です。

価格や受取方法は、赤い上部から切り離した白■#FFFFFFの下部エリアにまとめます。その中に白茶■#DDBB99の案内カードを置き、文字と輪郭を濃い紅系■#6E2434にします。文字と白茶は約5.93:1、輪郭と外側の白は約10.69:1です。広い紅色の背景は短い告知に、白茶は詳しい案内に担当を分ける構成です。

白茶と白の境界、装飾の赤を確認する

白茶■#DDBB99と白■#FFFFFFの比は約1.80:1です。白茶の上に白いカードを直接置くなら、濃い紅系■#6E2434で枠を付けるか、十分な余白を確保しましょう。この枠は白茶との比が約5.93:1、白との比が約10.69:1です。また紅色■#D7003Aと白茶の比は約2.95:1なので、小さな重要アイコンや状態の違いをこの2色の差だけで表すのは避け、文字や形も併用します。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上を求めています。操作に必要な部品の境界など、文字以外の重要な表示には隣接色との3:1以上が必要な場合もあります。バナーに商品写真を重ねる場合は文字の後ろの色が一定ではないため、実際の表示位置でも確認してください。

HueRollではHEXで色を調整し、選択色と白・黒とのコントラスト比を確認できます。ただし任意の2色同士の比較やAAの自動判定には対応していません。完成した背景・文字・ボタン・枠の組み合わせは別途確認しましょう。