弁柄色を使う和風バナー｜背景と装飾の色を決める

弁柄色（べんがらいろ）を和風バナーに使うなら、背景を赤茶色にするか、飾りとして少しだけ使うかで仕上がりが変わります。伝統的な色を使っても、文字と装飾が同じくらい目立つと、肝心の案内を読み取りにくくなります。今回は、陶器市と町家の公開案内を例に、背景・文字・装飾の役割を決める方法を紹介します。

弁柄色は背景と装飾のどちらに使う？

弁柄色は、酸化鉄を主成分とする赤色顔料「弁柄」に由来する、暗い赤茶色です。弁柄は建物の格子や柱、陶器などの着色に使われてきました。色名の由来を知ると、木材や焼き物を扱うバナーにも取り入れる理由を考えやすくなります。

Web用の色見本の一例は■#8F2D12です。HEX（ヘックス）とは、赤・緑・青の成分を16進数で指定するカラーコードです。弁柄色に対応するHEX値は色名資料によって少し異なるため、ここではこの値を基準に配色を試します。

背景に使えば弁柄色そのものが大きな印象を作り、装飾に使えば余白や文字を引き立てる差し色になります。まずバナーに入れる主な情報を決め、その情報が背景から十分に区別できる側を選びましょう。

和風バナーの2つの配色例

陶器市の告知：淡い背景に弁柄色を小さく添える

全体の背景を紙のような淡い■#F7F0E3、イベント名と日時の文字を墨色に近い■#2D2926にします。両者のコントラスト比（明暗の差を示す数値）は約12.72:1です。見出し横の小さな飾り線や、角に置く模様の一部分に■#8F2D12を使うと、赤茶色を主役にしすぎず、和風のアクセントを加えられます。

「会場案内」のボタンは■#8F2D12の背景に■#F7F0E3の文字を置きます。この組み合わせは約7.26:1で、淡いページ背景との境界も同じ比率です。ボタンと飾りを同じ弁柄色にすると、色数を増やさずまとまりを作れます。

町家の公開案内：弁柄色を背景に広く使う

町家の外観写真と短い見出しを組み合わせるバナーでは、写真の隣の広い背景を■#8F2D12にし、見出しを■#F7F0E3で表示する方法があります。文字と背景のコントラスト比は約7.26:1です。開催日時と場所は■#F7F0E3の情報カードにまとめ、文字を■#2D2926にすると約12.72:1になります。

背景に装飾を加えるなら、落ち着いた黄みのベージュ■#D4B68Dを短い飾り線に使う方法もあります。■#D4B68Dと弁柄色の■#8F2D12の比率は約4.26:1です。ただし、細かな文字を■#D4B68Dで長く載せるのは避け、飾りに役割を絞ります。弁柄色が広い分、装飾の本数や面積を減らすと文字の位置を見つけやすくなります。

文字と装飾を調整するときの注意点

弁柄色の背景に濃い■#2D2926の文字を載せた場合、■#8F2D12とのコントラスト比は約1.75:1と小さくなります。明るい文字色へ変更するか、文字の下に別の背景を敷きましょう。また、■#D4B68Dと淡い■#F7F0E3の差も約1.70:1なので、明るい背景では重要な線やアイコンの色として頼らない方が安全です。

WCAG（Webコンテンツのアクセシビリティに関する指針）2.2のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が必要です。操作に必要なアイコンや境界線などの非テキスト要素にも、隣接する色との3:1以上が原則です。単なる飾り線と、操作を示す線は区別して考えます。

バナーを縮小したときに細い装飾や小さな文字が埋もれないかも確認してください。HueRollではHEXを指定し、その色と白・黒とのコントラストを確認できます。ただし、任意の2色を比較したり、AA・AAAを自動判定したりする機能はありません。ここで示した比率は各HEX値から別途計算しています。