茜色と生成り色で作る和風バナー｜色の面積と文字の置き方

茜色（あかねいろ）は茜の根を使った染め色に由来する赤、生成り色（きなりいろ）は漂白していない布を思わせる黄みのある白です。この2色で和風バナーを作るとき、半分ずつ塗り分ければよいとは限りません。この記事では茜色■#B7282Eと生成り色■#FBFAF5を例に、色の面積と文字を置く場所を決める方法を紹介します。HEX（ヘックス）は、Webの色を6桁の英数字で示すコードです。伝統的な色名には資料ごとに色見本の違いがあるため、ここではこの2つのHEX値に統一します。

文字量に合わせて茜色と生成り色の面積を決める

茜色■#B7282Eは濃く目に入りやすいため、広く使うとバナーの主役になります。一方、生成り色■#FBFAF5は明るく彩度が低いため、開催日や会場など複数の情報を載せる背景に使いやすい色です。まずバナーの中で、タイトルと日時のどちらを優先して見せたいかを考えましょう。

情報量が多ければ生成り色を約8割、茜色を約2割にして、赤を細い帯や申込み部分に絞る案が考えられます。短い告知を強く見せたいなら、茜色を上部の約4割、生成り色を下部の約6割にする案もあります。比率は固定のルールではなく、文字数や写真の有無に合わせるための出発点です。

和紙の企画展バナーを2通りに組み立てる

案A：生成り色を広く使う横長バナー。背景の約8割を生成り色■#FBFAF5にして、左側に「和紙と手しごとの企画展」という見出し、その下に開催日・会場・短い紹介文をそろえます。見出しと本文は墨色に近いチャコール■#2D2926にすると、生成り色とのコントラスト比は約13.79:1です。コントラスト比は文字と背景の明るさの差を示す数値です。

残る右端の約2割を茜色■#B7282Eの縦帯にします。帯には細かな文章を詰めず、装飾として余白を残します。バナー内に「詳細を見る」ボタンを設けるなら、生成り色の面に茜色■#B7282Eのボタンを置き、文字を生成り色■#FBFAF5にします。文字とボタンの比も、ボタンと周囲の背景の比も約5.99:1です。

案B：茜色を大きな見出し面にするバナー。上部の約4割を茜色■#B7282Eにし、中央寄せの大きな企画展名だけを生成り色■#FBFAF5で載せます。この文字のコントラスト比は約5.99:1です。下部の約6割は生成り色■#FBFAF5に戻し、開催日・会場と「展示内容を見る」の案内をチャコール■#2D2926で整理します。下部の文字は約13.79:1です。

文字を色の切り替わる境界にまたがせず、見出しと詳細をそれぞれ一つの背景内に収めます。色の面積を入れ替えるだけでなく、上部は短い言葉、下部は読む情報という役割も分けるのがポイントです。

文字の置き場所と細い境界線を最後に確認する

茜色■#B7282Eの上にチャコール■#2D2926で小さな文字を書くと、コントラスト比は約2.30:1しかありません。茜色の面では生成り色■#FBFAF5の文字に切り替えましょう。逆に、白■#FFFFFFと生成り色■#FBFAF5の差は約1.05:1で、生成り色の上に白文字を置いてもほとんど見分けられません。

WCAG 2.2というWebのアクセシビリティ指針では、レベルAAの通常サイズの文字に4.5:1以上、大きな文字に3:1以上のコントラスト比を求めています。生成り色■#FBFAF5の上で情報を区切る線が必要なら、灰茶色■#74695Fの線は約5.12:1です。ただし、意味のない飾り線まで必ず3:1以上にする必要はありません。スマートフォンで縦帯が狭くなる場合は、上下の帯に移すなどして、文字を狭い帯へ押し込まないよう調整します。

HueRollではHEXコードで色を選び、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA判定は自動ではできないため、実際に文字やボタンが触れる背景色との組み合わせを別途確認してください。