銅色に合う色は？あたたかみを引き立てる組み合わせ

銅色をWeb配色に取り入れるときは、あたたかみを残しながら周囲の色で輪郭を作ると使いやすくなります。この記事では銅色の一例として■#B87333を使い、深いフォレストグリーン■#264B46、ウォームアイボリー■#FAF5EC、エスプレッソ■#1E1815を組み合わせます。銅色そのものを文字色にするより、面・枠・装飾として使い、文字は濃色で支えると役割を分けやすくなります。

銅色には、深いグリーンとウォームアイボリーを合わせる

■#B87333は赤みと黄みを含む中明度の色なので、周囲まで暖色でそろえると全体が似た明るさに寄ることがあります。そこで、ここでは色相（赤・青・緑など色みの違い）が離れた■#264B46を見出しや主要操作に使います。ウォームアイボリー■#FAF5ECを背景にすると、銅色のあたたかさを残しながらページ全体を明るくできます。

本文には■#1E1815を使います。アイボリー背景とのコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約16.16:1です。フォレストグリーン■#264B46をアイボリー上の見出しやリンクに使う場合も約8.88:1あります。

建築事務所の素材紹介ページでは、銅色を素材帯と枠線に使う

建築事務所が外装材や内装材を紹介する素材ページを例にすると、ページ背景を■#FAF5EC、本文を■#1E1815、セクション見出しを■#264B46にします。

「Copper Finish」「Patina」などの素材名をまとめる帯には■#B87333を使い、その上の文字を■#1E1815にすると約4.63:1です。通常サイズの文字に必要な4.5:1を上回ります。銅色の帯そのものはアイボリー背景に対して約3.49:1あるため、情報をまとめる境界として使う場合にも3:1以上を確保できます。

「素材サンプルを問い合わせる」などの主要ボタンには■#264B46を背景にし、文字を■#FFFFFFにすると約9.65:1です。銅色を主役の素材表現に残し、操作は深いグリーンへ分けることで、暖色の面積を増やしすぎずに配色を整理できます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上のコントラスト比が必要です。また、操作や情報理解に必要な境界などの非テキスト情報には、隣接色との3:1以上が基準になります。

あたたかみを引き立てるなら、銅色の上に白や深いグリーンを直接置かない

■#B87333と■#FFFFFFのコントラスト比は約3.79:1で、通常サイズの文字に必要な4.5:1へ届きません。また、■#B87333と■#264B46は約2.54:1なので、グリーン文字を銅色面へ直接置く使い方にも向きません。

銅色面の文字には■#1E1815を使い、グリーンはアイボリー面の見出しやボタンへ回すと、銅色のあたたかみと情報の役割を両立しやすくなります。HueRollでは■#B87333を入力し、補色・類似色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。