チョコレートブラウンを背景にするには？文字と写真を合わせる配色

チョコレートブラウンを背景にすると、商品写真や見出しを落ち着いた雰囲気で見せられます。ただし、濃い茶色の写真まで同じ背景に重ねると、輪郭が埋もれることがあります。背景と文字の明るさを分け、写真の周りに明るい面を作ることが基本です。お菓子の告知バナーと革小物の紹介ページを例に、具体的な色の使い方を見ていきます。

背景の茶色を決めてから、文字と写真の置き場所を分ける

チョコレートブラウンは、チョコレートを思わせる深い茶色の呼び方で、決まった一つのカラーコードがあるわけではありません。ここでは赤みを含む暗い茶色■#4B3029を背景の例にします。なお、CSS（Webページの見た目を指定するスタイルの仕組み）の色名「chocolate」は■#D2691Eで、今回の暗い背景色とは別の明るい橙茶色です。HEX（16進数で色を指定するコード）を使い、色名ではなく数値で管理すると混同を防げます。

暗いチョコレートブラウン■#4B3029には、明るいアイボリー■#FFF9EFを文字にすると、コントラスト比（隣り合う2色の明るさの差）は約11.43:1です。一方、CSSの「chocolate」■#D2691Eに白■#FFFFFFを載せた場合は約3.63:1で、通常の文字に必要な4.5:1には届きません。茶色でも明るさによって合う文字色が変わります。

文字と写真を配置する2つの配色例

お菓子の告知バナー：暗い背景に明るい写真枠

新作チョコレートを紹介する横長バナーでは、全体の背景をチョコレートブラウン■#4B3029にし、タイトルと短い説明をアイボリー■#FFF9EFでまとめます。右側の商品写真は、明るいクリーム色■#F8F2E8の余白を持つ長方形の領域に配置します。クリーム色と茶色の比は約10.75:1なので、写真の周囲の面は背景から明確に分けられます。チョコレートそのものが暗く写っている場合は、写真内部の輪郭や明るさも別に確認してください。

「商品を見る」ボタンには淡い金色■#E6BF82を使い、文字は濃いこげ茶■#30231Fにします。文字とボタンの比は約8.76:1、ボタンとチョコレートブラウン背景の比は約6.92:1です。文字を写真の上に置かず、単色の茶色い領域にまとめれば、写真の明暗に左右されにくい構成になります。

革小物の紹介ページ：写真は明るく、説明は茶色いパネルへ

暗い革製品を見せる場合は、ページの広い面をクリーム色■#F8F2E8とし、写真を左側に大きく配置します。右側にチョコレートブラウン■#4B3029の説明パネルを置き、商品名と説明をアイボリー■#FFF9EFにします。写真を囲むクリーム色とパネルの比は約10.75:1、パネル内の文字と背景は約11.43:1です。商品の影や輪郭が背景に溶ける場合は、写真自体の背景や照明を調整しましょう。

説明パネルの上部に、くすんだミントグリーン■#B8D3CAの小さなカテゴリ表示を置くなら、文字はチョコレートブラウン■#4B3029にすると約7.53:1です。写真の下のクリーム色の領域に「詳しく見る」ボタンを置く場合は、チョコレートブラウン■#4B3029のボタンとアイボリー■#FFF9EFの文字を使います。文字は約11.43:1、ボタンとクリーム色の周囲は約10.75:1になります。

暗さを調整するときは、写真の色も一緒に確認する

茶色い背景が重く感じられたら、まず明るい写真枠や余白を広げ、茶色を見出し周辺だけに絞ってみましょう。写真に含まれる木目・影・チョコレートの色は画像ごとに違うため、単色同士のコントラスト比だけで写真の見やすさは判断できません。写真上に文字を置く必要があるときは、写真の最も明るい部分と暗い部分も確認し、難しければ文字を単色のパネルに移します。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常の文字は背景との比が4.5:1以上、大きな文字は3:1以上必要です。操作部品の識別に必要な見た目にも、隣接色との3:1以上が求められる場合があります。HueRollではHEX入力から関連色や配色候補を探し、選択した色と白・黒とのコントラストを確認できます。任意の2色の比較やAA・AAAの自動判定はできないため、完成した配色は別途確認してください。