ディープ・ゴールドに合う色は？渋みのある黄を上品に引き立てる組み合わせ【#88981B】

ディープ・ゴールド（■#88981B）は、黄みに緑を含んだ渋みのある色です。ここでいう「ゴールド」は金属の光沢を再現する表現ではなく、HueRoll上の色名として扱います。Webサイトでは、会員ランクやロイヤルティ特典のページで、現在のランクカード、主要な「特典を見る」ボタン、重要な会員情報の背景などに使うと、明るい黄色よりも落ち着きを残しながら上品に引き立てやすくなります。ただし、■#88981Bは明るい背景上の通常文字としてはコントラストが十分ではないため、文字色として広く使うより、主要ボタンや選択面の背景として役割を決める方が扱いやすい色です。ここでは、ウォームアイボリー、インクオリーブ、ディープスレートを合わせ、渋みのある黄を主役にしながら会員情報を整理しやすい配色を考えます。

ウォームアイボリーを土台にし、濃い文字色とスレートで役割を分ける

■#88981Bには、背景用のウォームアイボリー■#FFFDF5、本文やボタン文字用のインクオリーブ■#171811、補助操作用のディープスレート■#2E3548を合わせる例が考えられます。

■#FFFDF5は黄みをわずかに含む明色で、ランク一覧や特典カードの広い面を明るく保てます。■#171811はオリーブをわずかに含むほぼ黒の濃色なので、会員番号以外の説明文、獲得ポイント、更新日、条件などをゴールド系の色に頼らず整理できます。■#2E3548は青みを含む濃いスレート色で、黄系から色相を離しながら鮮やかさを抑えているため、補助操作を別の役割として見せやすくなります。

会員ランクページでは、ディープ・ゴールドを現在のランクと主要操作に集める

実装では、会員情報や特典一覧の広い背景を■#FFFDF5にし、現在のランクカードや主要な「特典を見る」ボタン背景へ■#88981Bを使います。その上の文字は■#171811にすると、通常文字に必要なコントラストを確保できます。獲得ポイント、次のランクまでの条件、更新日は■#171811で統一し、色だけで重要度を作らないようにします。

UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、■#88981Bの面に■#2E3548の小さな「条件を確認」ボタンを置き、その文字を■#FFFDF5にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#88981Bと■#171811は約5.58:1、■#171811と■#FFFDF5は約17.55:1、■#2E3548と■#FFFDF5は約12.00:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#88981Bと■#FFFDF5は約3.15:1、■#88981Bと■#2E3548は約3.81:1なので、これらを隣接させる意味のあるUI部品を識別するための視覚情報として必要な3:1以上も確保できます。

上品に見せるなら、会員ランクを色だけで伝えない

■#88981Bと■#FFFDF5のコントラスト比は約3.15:1です。そのため、明るい背景上の通常サイズの本文文字として■#88981Bを使うのは避け、文字は■#171811へ切り替えます。ゴールドは現在のランクカード、主要ボタン、枠線などへ役割を絞ると、上品な強調を残しながら情報を読み分けやすくなります。

また、「ゴールド」「シルバー」などのランクや「達成済み」「未達成」といった状態は、色だけで区別せず、ランク名の文字、アイコン、進捗数値、チェックマークなども併用します。HueRollでは■#88981BをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。