ブロンズに合う色は？重厚感を活かす配色

ブロンズをWeb配色に取り入れるときは、暗めのニュートラルと落ち着いた明るい背景を組み合わせると、重厚感を活かしながら情報を整理しやすくなります。この記事ではブロンズの一例として■#8A6440を使い、ディープスレート■#25313A、パーチメント■#F5F0E8、サンド■#D7C8B5を組み合わせます。ブロンズをすべての文字へ使うのではなく、年代表示や線、区切りなど役割を限定するのがポイントです。

ブロンズには、深いスレートとパーチメントを合わせる

■#8A6440は黄みと赤みを含む中明度のブラウン系です。本文と主要見出しには■#25313Aを使い、背景には■#F5F0E8を使います。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約11.72:1です。暗い文字と明るい背景で土台を作ると、ブロンズの存在感を小さな面積でも出しやすくなります。

補助面には■#D7C8B5を使えます。■#25313Aとの比率は約8.12:1です。ブロンズとサンドは近い暖色方向ですが、明るさと彩度をずらすことで、主役と補助面の役割を分けられます。

博物館の年表ページでは、ブロンズを年代表示とタイムラインに使う

博物館や歴史資料館のコレクション年表ページを例にすると、ページ背景を■#F5F0E8、本文と資料名を■#25313Aにします。各時代の解説カードには■#D7C8B5を使い、その上も■#25313Aで統一すると約8.12:1です。

「1890」「1925」などの年代バッジは■#8A6440を背景にし、文字を■#FFFFFFにすると約5.28:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

年代を結ぶタイムラインの線や重要な区切りにも■#8A6440を使えます。パーチメント■#F5F0E8に対して約4.65:1、サンド■#D7C8B5に対して約3.22:1あるため、線そのものが情報理解に必要な場合でも3:1以上を確保できます。

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

重厚感を活かすなら、ブロンズと濃色を直接重ねすぎない

■#8A6440と■#25313Aのコントラスト比は約2.52:1です。そのため、ブロンズ文字をスレート背景へ置いたり、両者の境界だけで重要な状態を示したりする使い方には向きません。濃い面の文字は■#FFFFFF、明るい面の文字は■#25313Aと役割を分けるほうが安全です。

また、ブロンズをパーチメント上の通常サイズ文字として使う場合は約4.65:1で基準を上回りますが、余裕は大きくありません。小さな本文を大量にブロンズへ置き換えるより、年代バッジ、見出し、線など用途を限定すると、重厚感を保ちながら読みやすさを確保しやすくなります。HueRollでは■#8A6440を入力し、補色・類似色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。