ゴールドに合う色は？高級感を出しやすい配色例

ゴールドをWeb配色に使うときは、明るい金色を広げすぎず、濃いニュートラルと落ち着いた背景で支えると、華やかさを保ちながら情報を整理しやすくなります。この記事では落ち着いたゴールドの一例として■#BE9338を使い、チャコール■#2C2A27、アイボリー■#F8F4EA、ワインレッド■#5A2E38を組み合わせます。

ゴールドには、チャコールとアイボリーを合わせる

■#BE9338は明るさのある暖色なので、白や淡いベージュの上へそのまま文字として置くと差が弱くなります。そこで、ゴールドは濃いチャコール■#2C2A27の上で小見出しや短いラベルに使います。この組み合わせのコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約5.06:1です。

本文エリアはアイボリー■#F8F4EAを背景にし、文字を■#2C2A27にすると約13.03:1です。明るい面と暗い面をはっきり分け、その間でゴールドを限定的に使うと、色数を増やしすぎずに高級感を狙いやすくなります。

高級腕時計のコレクションページでは、ゴールドを短い情報に絞る

高級腕時計のコレクションを紹介するランディングページを例にすると、ヒーロー部分を■#2C2A27、商品名を■#FFFFFFにします。白文字とチャコールの比率は約14.31:1です。その上で「Limited Edition」「Automatic」などの短い情報だけを■#BE9338にすると、ゴールドが装飾ではなく情報の強弱にも使えます。

製品説明や仕様は■#F8F4EAの面へ移し、本文を■#2C2A27にします。「来店予約」などの主要操作はワインレッド■#5A2E38を背景にし、文字を■#FFFFFFにすると約11.15:1です。ワインレッド自体もアイボリーに対して約10.16:1あるため、ボタンの境界を明るい背景上で明確にできます。

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

高級感を狙うなら、ゴールドを白や淡い背景の通常文字にしない

■#BE9338と■#F8F4EAのコントラスト比は約2.58:1、■#FFFFFFとの組み合わせでも約2.83:1です。そのため、ゴールドをアイボリーや白背景の通常サイズ文字として使うのは避けます。明るい面ではチャコールやワインレッドを文字にし、ゴールドは濃い面の短いラベル、飾り線、色見本などへ役割を絞ると扱いやすくなります。

HueRollでは■#BE9338を入力し、補色・類似色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。