柿色を主役にする秋の配色｜バナーに使う色合わせ

秋の催しを知らせるバナーで柿色を主役にするなら、鮮やかな橙色を大きく使う方法と、落ち着いた背景に目立つ面として添える方法があります。どちらも柿色だけで画面を埋めず、文字や申込ボタンの役割を決めるのがポイントです。秋の収穫体験と焼き菓子の紹介を例に、色の面積と組み合わせを比較します。

柿色は背景の広さと文字の濃さから決める

柿色（かきいろ）は、熟した柿の実を思わせる赤みのある橙色です。Webで使う見本の一例は■#ED6D3Dで、資料によっては少し違う■#EA6736も示されています。伝統色の名前から一つのカラーコードが必ず決まるわけではありません。この記事では■#ED6D3Dを基準にします。HEX（ヘックス）カラーコードとは、「#」に続く英数字で画面の色を表す形式で、ここでは6桁の表記を使います。

柿色は目を引きやすい色ですが、文字まで同じ色にする必要はありません。広い面に使う場合は濃い焦げ茶■#211B18を文字に、明るい生成り■#FFF8ECを情報欄に割り当てます。生成りを背景にするなら、柿色を見せる帯を作り、普通の大きさの見出しには暗く調整した赤橙■#9E3F1Fを使う方法があります。使う面積と明るさを分けると、柿色の存在感を残しながら情報を整理できます。

秋のバナーに使う2つの配色例

例1：収穫体験の告知は柿色を広い背景にする

「週末の柿収穫体験」という告知では、背景の大部分を柿色■#ED6D3Dにし、イベント名と短い案内は焦げ茶■#211B18で載せます。開催日や集合場所は生成り■#FFF8ECの小さな情報欄にまとめ、欄内の文字も焦げ茶■#211B18にします。「日程を見る」ボタンは焦げ茶■#211B18を背景に生成り■#FFF8ECの文字を使い、柿色の面と操作部分を区別します。

写真がある場合は、柿色の背景で写真の周囲を囲みすぎないよう余白を設けます。生成りの情報欄と柿色の背景の違いだけで重要な境界を伝えようとせず、必要に応じて焦げ茶■#211B18の枠や見出しを加えます。

例2：秋の焼き菓子バナーは生成りに柿色の帯を添える

商品写真を大きく見せたいときは、背景を生成り■#FFF8ECにして、上部に柿色■#ED6D3Dの帯を置きます。帯に載せる「秋の限定セット」は焦げ茶■#211B18で表示し、商品説明と価格も生成りの上に焦げ茶■#211B18で置きます。見出しを生成り側に配置するなら、柿色より濃い赤橙■#9E3F1Fに変えます。「商品を見る」ボタンは焦げ茶■#211B18に生成り■#FFF8ECの文字とし、購入につながる操作を飾りより優先します。

さらに変化を付けるなら、淡い柿色■#F5D5C5を数量や販売期間の補足欄に使い、欄内の文字は焦げ茶■#211B18にします。柿色の帯を何本も増やすより、一か所に絞るほうが商品写真と競合しにくくなります。

白文字や淡い色同士の組み合わせに注意する

コントラスト比は、文字と背景などの明るさの差を表す数値です。Webコンテンツのアクセシビリティ指針「WCAG 2.2」のAA基準では、通常サイズの文字は4.5:1以上、大きな文字は3:1以上が必要です。柿色■#ED6D3Dと焦げ茶■#211B18の比は約5.55:1、生成り■#FFF8ECと焦げ茶■#211B18は約16.11:1、濃い赤橙■#9E3F1Fと生成り■#FFF8ECは約6.25:1で、通常サイズの文字に使える組み合わせです。

一方、柿色■#ED6D3Dと生成り■#FFF8ECは約2.90:1、柿色■#ED6D3Dと白■#FFFFFFでも約3.06:1です。いずれも通常サイズの文字のAA基準を満たさないため、柿色の帯やボタンには焦げ茶の文字を基本にします。淡い柿色■#F5D5C5と生成り■#FFF8ECの比も約1.31:1と小さいため、操作に必要な枠やアイコンをこの差だけで示すのは避けます。意味のある文字以外の要素には、隣接色と原則3:1以上の差が必要です。

HueRollでは選択色と白・黒のコントラストを確認できますが、柿色と焦げ茶など任意の2色の比やAAの自動判定はできません。提案した配色を実際に置くときは、文字の背後に接する色を別途計算して確認してください。