シャンパンゴールドに合う色は？上品な配色の作り方

シャンパンゴールドは、黄みのあるゴールドをやわらかく淡くした方向の色として使われることがあります。この記事ではWeb上の一例として■#C9B37Eを使い、深いネイビー■#2F3C4D、ウォームアイボリー■#FBF7EF、落ち着いたプラム■#6C5A66を組み合わせます。明るいゴールドを広く使いすぎず、濃色で文字と境界を支えると、上品さを残しながら情報を整理しやすくなります。

シャンパンゴールドには、深いネイビーとウォームアイボリーを合わせる

■#C9B37Eは明るめの黄みを含む色なので、文字や見出しまで淡色にすると役割の差が弱くなります。そこで、本文と主要見出しには■#2F3C4Dを使います。シャンパンゴールド上でのコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約5.46:1、ウォームアイボリー■#FBF7EF上では約10.48:1です。

背景は真っ白より少し黄みのある■#FBF7EFにすると、シャンパンゴールドとの色相（赤・青・緑など色みの違い）のつながりを保ちやすくなります。小さなアクセントには■#6C5A66を使うと、暖色寄りの配色に少し変化を付けられます。プラム文字とアイボリー背景の比率は約5.97:1です。

ホテルのスパ案内では、ゴールドをメニュー帯と区切りに使う

ホテルのスパやウェルネスプランを紹介するページを例にすると、ページ全体を■#FBF7EF、施術名や説明文を■#2F3C4Dにします。本文は約10.48:1あり、長めの説明にも使いやすい組み合わせです。

「Body Treatment」「Facial」などのカテゴリ帯や料金の要約面には■#C9B37Eを使い、その上の文字を■#2F3C4Dにすると約5.46:1です。シャンパンゴールドを装飾だけでなく情報面として使う場合も、濃い文字を合わせることで通常サイズの文字に必要な4.5:1以上を確保できます。

「予約する」などの主要操作には■#6C5A66を背景にし、■#FFFFFFの文字を置くと約6.38:1です。プラムとアイボリーの境界も約5.97:1あるため、明るいページ背景上でもボタンの輪郭を見分けやすくできます。

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

上品に見せるなら、淡い面同士や白文字だけに頼らない

■#C9B37Eと■#FBF7EFのコントラスト比は約1.92:1で、■#FFFFFFとの組み合わせでも約2.05:1です。そのため、シャンパンゴールド上の通常サイズ文字を白にしたり、ゴールドとアイボリーの色差だけで重要な区切りを示したりする使い方には向きません。

また、プラム■#6C5A66をシャンパンゴールド上の小さな文字にすると約3.11:1で、通常サイズの4.5:1に届きません。ゴールド面では■#2F3C4Dを文字や枠線に使い、プラムはアイボリー面やボタン背景に回すと役割を分けやすくなります。HueRollでは■#C9B37Eを入力し、補色・類似色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。