栗色とクリーム色を合わせる｜商品写真の背景に使う配色

栗色とクリーム色は、商品写真の周囲を温かみのある配色にまとめたいときの組み合わせです。ただし、どちらを広く使うかは商品の色によって変えます。濃い革小物なら明るいクリーム色を背景にし、白っぽい陶器なら栗色を写真の周囲に置く方法があります。写真の見え方を軸に、文字とボタンの色まで具体的に考えます。

商品の色に合わせて、栗色とクリーム色の面積を変える

栗色は赤みを含む濃い茶色、クリーム色は黄みのある淡い色として考えられます。この記事では栗色■#704434とクリーム色■#FFF2DEを使用します。どちらも今回のデザイン用に選んだ色で、色名ごとに唯一のコードが決まっているわけではありません。HEX（ヘックス）はWebの色を「#」と6桁の英数字で指定するカラーコードです。

この2色のコントラスト比は約7.41：1です。コントラスト比は2色の相対的な明るさの差を示します。数値上は十分に違っても、商品写真の輪郭がどう見えるかは、商品の素材・照明・写真内の背景にも左右されます。配色を先に固定せず、実際に使う写真の横に色を置いて確かめましょう。

濃い革財布と明るい陶器の写真で背景を入れ替える

例A：栗色の革財布を並べる商品一覧。写真を置くカード全体にはクリーム色■#FFF2DEを広く使い、商品名・価格・説明は濃いチャコール■#2F2925にします。「商品を見る」ボタンは栗色■#704434の背景にクリーム色■#FFF2DEの文字を合わせます。濃い革製品を明るい面で囲む構成です。チャコール文字とクリーム背景のコントラスト比は約12.98：1、ボタン文字と栗色の背景は約7.41：1になります。商品自体が暗い写真の場合は、暗い影が背景に沈まないかも確認します。

例B：白っぽい陶器を紹介する特集バナー。バナーの一部に栗色■#704434の写真エリアを作り、明るい陶器を配置する想定です。栗色の面に見出しを載せる場合はクリーム色■#FFF2DEの文字を使います。商品名やサイズなど情報量の多い部分はクリーム色■#FFF2DEの別エリアに置き、チャコール■#2F2925で表示します。「詳しく見る」ボタンを栗色の面に置くなら、背景はクリーム色■#FFF2DE、文字は栗色■#704434に反転させます。ボタンの面と周囲の栗色は約7.41：1の差があります。

例Aでは明るい面を主役にして栗色をボタンなどに限定し、例Bでは写真エリアだけ栗色を広めに使います。最初から半分ずつに分けず、写真の周りに必要な余白と説明文の量を見て配分を決めます。

写真ファイルの背景と、白い商品の輪郭を確認する

Webページの背景色を変えても、写真ファイルの中に写り込んだ背景色は変わりません。例Bで白い背景付きの写真を栗色の面に置くと、意図しない白い四角が残ることがあります。撮影時の背景を合わせるか、適切に切り抜いた画像を使うなど、写真自体も調整が必要です。実際の写真を見ずに商品の輪郭のコントラストを断定することはできません。

仮に写真の白い部分を白■#FFFFFFとすると、クリーム色■#FFF2DEとのコントラスト比は約1.10：1と小さめです。淡い商品をクリーム色のカードに載せる場合は、写真内の影や縁が見えるかを実際の表示幅で確認し、必要なら栗色■#704434の枠でカードを区切ります。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字は原則4.5：1以上、大きな文字は3：1以上が基準です。今回の栗色■#704434とクリーム色■#FFF2DEは文字と背景として組み合わせられますが、写真の中の文字や半透明の重なりは別に検証してください。HueRollは選択色と白・黒のコントラストを確認できますが、任意の2色の比較やWCAGの自動合否判定には対応していません。