弁柄色と胡粉色の和風配色｜見出しと背景の組み合わせ

弁柄色と胡粉色は、深い赤褐色と白に近い色を組み合わせる和風配色の候補です。胡粉色を広い背景にして弁柄色を見出しに使う方法と、弁柄色を背景にして胡粉色の文字を置く方法では、同じ2色でも見せたい情報の順序が変わります。この記事では和綴じ本の展示会を紹介するWebページを例に、見出し・本文・案内カード・申込みボタンの色を具体的に考えます。

弁柄色を見出し、胡粉色を背景にする理由

弁柄色（べんがらいろ）は、酸化鉄を主成分とする赤い顔料「弁柄」に由来する、くすんだ赤褐色です。今回の見本には弁柄色■#8F2D12を使います。一方、胡粉色（ごふんいろ）は、牡蠣などの貝殻から作る白い顔料「胡粉」を思わせる、わずかに黄みのある白です。見本は胡粉色■#FFFFFCとします。どちらも色名だけで数値が一つに決まるわけではありません。HEX（ヘックス）はWebの色を6桁の英数字で指定するコードで、制作時は色名とともに共有すると確実です。

今回の弁柄色■#8F2D12と胡粉色■#FFFFFCのコントラスト比は約8.21:1です。コントラスト比は隣り合う色の明るさの差を表す数値です。明るい背景に濃い見出しを置いても、濃い背景に明るい見出しを置いても、この2色間の数値は同じです。ただし色の面積が変わると、展示会の印象や写真の見え方も変わるため、どこを大きな面にするかは別に考えましょう。

和綴じ本の展示会で見出しと背景を入れ替える

例1：胡粉色を広い背景にする。展示会の案内ページ全体を胡粉色■#FFFFFCにし、「和綴じ本の小さな展示会」という見出しを弁柄色■#8F2D12で表示します。文字と背景の比は約8.21:1です。会場への説明や作品の紹介文には濃い墨茶色■#302B29を使い、胡粉色との比を約13.94:1にします。

開催日や会場住所をまとめる案内カードは淡い紙色■#F4EEE4にして、文字を墨茶色■#302B29のまま使うと約12.11:1です。「来場予約」ボタンは胡粉色■#FFFFFCの背景の上に弁柄色■#8F2D12で塗り、ボタン内の文字を胡粉色■#FFFFFCにします。文字とボタンの比、ボタンと周囲の背景の比はいずれも約8.21:1です。背景を明るく保ち、見出しと操作部分に赤褐色を集中させる案です。

例2：弁柄色を冒頭の背景にする。同じ展示会でも、ページ上部の横長の案内帯を弁柄色■#8F2D12に変えると、濃い赤褐色の面が先に目に入ります。ここには胡粉色■#FFFFFCで見出しと短い案内文を置きます。文字と背景の比は約8.21:1です。帯の中の「作品一覧へ」ボタンは胡粉色■#FFFFFCで塗り、弁柄色■#8F2D12の文字を載せます。ボタンの文字も周囲の背景との差も約8.21:1です。下に続く会期や作家紹介は胡粉色■#FFFFFCの背景へ戻し、見出しを弁柄色■#8F2D12、本文を墨茶色■#302B29にして情報を整理します。

白に近い背景同士の境界と細い文字に注意する

胡粉色■#FFFFFCと案内カードの紙色■#F4EEE4のコントラスト比は約1.15:1しかありません。カードの区切りが必要なら、落ち着いた灰茶色■#7C6E62の枠を加えます。この枠と胡粉色■#FFFFFCの比は約4.92:1、紙色■#F4EEE4との比は約4.27:1です。細すぎる線は実際の画面で弱く見える場合があるため、2px程度の線幅や余白も合わせて調整します。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字は4.5:1以上、大きな文字は3:1以上が原則です。操作に必要な部品の境界など、文字以外の重要な表示には隣接色との3:1以上が必要な場合があります。開催日や予約状況を色だけで区別せず、見出しや説明にも明記しましょう。

HueRollではHEXを入力して色を調整し、選択色と白・黒とのコントラストを確認できます。ただし任意の2色間の比較やAA判定は自動ではできません。実際に接する文字・背景・ボタン・枠の組み合わせは、別途確認してください。