ターコイズとブラウンはどう合わせる？商品写真の周囲に使う配色

ターコイズとブラウンを合わせるなら、どちらも商品写真の周囲に大きく広げるのではなく、写真の中で目立つ色に応じて背景を選ぶ方法があります。青緑のターコイズと落ち着いた茶色は色みが異なるため、商品を見せる位置と文字の置き方を整理すると、写真を邪魔しない配色にできます。ここではターコイズ色の小皿と茶色い木製トレーを紹介する商品ページを例に考えます。

ターコイズとブラウンは明るい余白でつなぐ

ターコイズは青みと緑みを含む色、ブラウンは茶色系の色です。色名に唯一のHEXコードがあるわけではないため、この記事ではターコイズ■#2A9294と深いブラウン■#5A3F32を例にします。HEX（ヘックス）は、Web上の色を「#」と6桁の英数字で指定する形式です。

この2色を直接隣り合わせにしたときのコントラスト比は約2.57:1です。コントラスト比は2色の相対的な明るさの差を表す数値で、色みが大きく違っても十分な明るさの差があるとは限りません。写真の外側には生成り系の■#FAF6EDを広く使い、ターコイズを細い装飾、ブラウンを見出しとして分けると、両方を大面積で競わせずに済みます。

生成り系■#FAF6EDとブラウン■#5A3F32の文字の比は約8.88:1です。説明文にはチャコール■#302F2Bを使えば、同じ背景に対して約12.42:1あります。商品写真の色を引き立てたいときほど、文章には濃い文字を選んで背景との違いを確保しましょう。

商品写真に写る主役の色で背景を入れ替える

例えば、ターコイズ釉薬の小皿と木製トレーのセットを紹介するページでは、写真の色を見ながら周囲の面を切り替えます。写真そのものの色を加工するのではなく、写真を載せるカードと外側の背景に色を付ける想定です。

• ターコイズの小皿が目立つ写真：写真の外側を生成り系■#FAF6EDにして、白■#FFFFFFのカードに画像を置きます。小皿の青緑が写真の中心になるため、ターコイズ■#2A9294は見出しの横の短い線などに絞ります。商品名はブラウン■#5A3F32、説明はチャコール■#302F2Bにします。購入ボタンは濃い青緑■#12676Aの面に白■#FFFFFFの文字を置きます。ボタン文字との比は約6.62:1、ボタンと生成り系の周囲との比は約6.13:1です。
• 木製トレーが目立つ写真：写真を並べるセクションを淡いターコイズ■#DFF2EEに変え、画像は白■#FFFFFFのカードに置きます。見出しをブラウン■#5A3F32にすれば、淡い背景との文字コントラスト比は約8.25:1です。購入ボタンもブラウン■#5A3F32の面に白■#FFFFFFの文字を使うと約9.58:1、ボタンと周囲の淡いターコイズの差は約8.25:1です。木の色を主役にしながら、周囲に青緑を添えられます。

どちらの案も、商品写真と説明文を別の領域に置きます。写真にターコイズが多いなら周囲は控えめに、茶色が多いなら淡い青緑を広めに使うというように、写真内の色の量を見て決めるのがポイントです。

写真のカード境界とボタンの文字色を確認する

白■#FFFFFFのカードと生成り系■#FAF6EDの背景の比は約1.08:1、白いカードと淡いターコイズ■#DFF2EEの背景も約1.16:1です。どちらも面の境目が弱いため、カードを明確に区切りたい場合は余白やブラウン■#5A3F32の輪郭線を使います。この線は白に対して約9.58:1、淡いターコイズに対して約8.25:1です。ただし、装飾だけのカードまで濃い線で囲む必要はありません。

ターコイズ■#2A9294をボタンの背景にして白■#FFFFFFの文字を置くと、比は約3.72:1にとどまります。通常のボタン文字には不足するため、今回は濃い青緑■#12676Aやブラウン■#5A3F32をボタンに使いました。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常の文字に原則4.5:1以上、大きな文字に3:1以上のコントラストが必要です。

写真には明るい部分も暗い部分もあるので、文字を直接重ねる場合は位置ごとに確認します。スマートフォンでは写真と商品説明を縦に並べ、購入ボタンが近すぎないかも見ましょう。HueRollではHEXコードを調整し、配色候補や選択色と白・黒のコントラストを確認できます。ただし、任意の2色同士の比較やWCAGの自動判定には対応していません。ここに記載した組み合わせは別途計算して確かめています。