銅色と黒の配色例｜装飾と背景の面積バランス

銅色と黒の組み合わせは、黒い背景に赤みのある銅色を少し添えると、落ち着いた中にも温かさを感じさせる配色にできます。ただし、どちらの色も広く使うと画面が重くなり、銅色の装飾を増やしすぎると文字や商品より目立つことがあります。商品紹介バナーを例に、背景と装飾の面積をどう配分するか考えます。

黒を広く、銅色を小さく使うのが出発点

Webで銅色を表す一例は■#B87333です。少し赤みのある茶色で、黒に近い■#151515と組み合わせると色の違いがはっきりします。HEX（ヘックス）カラーコードは、画面の色を「#」と6桁の英数字で表す方法です。なお、銅色という名前に唯一のカラーコードがあるわけではありません。金属の光沢も単色のコードだけでは再現できないため、ここでは画面上の平らな色として扱います。

まず黒を背景や大きな帯に、銅色を短い下線・細い枠・小さなマークに割り当てます。銅色を広い面に敷くより、置く場所を絞ったほうが見出しや商品の情報と競合しにくくなります。黒と銅色を半分ずつにする必要はありません。背景の面積を先に決め、その後で装飾を足す順序が扱いやすいでしょう。

バナーで比較する2つの面積バランス

例1：黒が主役の新商品バナー

写真を除いた色面積の目安として、黒■#151515約80％、淡い生成り■#F6F0E8約15％、銅色■#B87333約5％から試します。黒を全体の背景にし、生成りは商品写真の周囲に置く小さな面や情報の区切りとして使います。大きな見出しと説明文は黒の上に生成りで載せ、銅色は見出しの下線と短い区切り線に限定します。銅色を写真の縁まで何重にも使わず、目立たせたい箇所を一つ選ぶのがポイントです。

例2：黒を減らしたイベント告知バナー

暗さが強い場合は、生成り■#F6F0E8約70％、黒■#151515約25％、銅色■#B87333約5％に入れ替えてみます。生成りを背景にし、黒はタイトルを載せる帯と本文の文字に使用します。銅色は開催日の横の短い線や飾り枠に添えます。黒い帯を画面の一部にとどめると、同じ3色でも余白を感じる構成に変わります。

どちらも写真や文字を除いた色付きの面についての目安で、固定ルールではありません。写真の大きさや文字量に合わせて調整し、5％を厳密に測る必要はありません。

装飾の増やしすぎと文字のコントラストに注意

銅色を増やしたいときは、線を太くする前に装飾の数を減らせないか確認します。細い枠が何本もあるより、短い線や一つのマークに集めたほうが用途を伝えやすい場合があります。銅色の面積を増やすなら、黒い背景の広さや余白も一緒に見直しましょう。

文字と背景の明るさの差を表すコントラスト比も重要です。この例では、生成り■#F6F0E8と黒■#151515は約16.13:1、銅色■#B87333と黒■#151515は約4.82:1です。一方、銅色■#B87333と生成り■#F6F0E8は約3.35:1で、Webコンテンツを利用しやすくするための指針「WCAG 2.2」のAAという適合レベルでは、通常サイズの文字に4.5:1以上が必要です。この組み合わせはその基準に届きません。生成り背景の本文や見出しは黒で表示し、銅色は装飾へ回すのが無難です。

銅色をボタンの背景にする場合も、白文字ではなく黒■#151515との組み合わせを検討します。銅色■#B87333に対する白■#FFFFFFの比は約3.79:1、黒■#151515なら約4.82:1です。操作に必要な枠やアイコンは隣り合う色との比が原則3:1以上か確かめ、細すぎる線も避けてください。HueRollでは選んだ色と白・黒のコントラストを確認できますが、生成りのような別の背景との組み合わせは個別に計算して確認する必要があります。