リッチ・ゴールドに合う色は？渋みのある黄を品よく際立たせる組み合わせ【#A3B814】

リッチ・ゴールド（■#A3B814）は、黄にわずかな緑みを含み、明るさを抑えた落ち着きのある色です。Webサイトでは、企業のサステナビリティレポートや年次報告ページで、年度の切り替え、重要な数値の見出し、主要な「レポートをダウンロード」ボタンなどに使うと、渋みのある黄を品よく際立たせながら情報を整理しやすくなります。ただし、淡い背景の上にゴールドの塗りだけを置くと、ボタンや選択タブの境界としてはコントラストが不足する場合があります。ここでは、ウォームアイボリー、オリーブチャコール、ダスティライラックを合わせ、文字とUIの見分けやすさも確認しながら配色を組み立てます。

ウォームアイボリーを土台にし、ダスティライラックで黄に穏やかな色相差をつくる

■#A3B814には、背景用のウォームアイボリー■#FBFAF2、本文や枠線用のオリーブチャコール■#343222、補助操作用のダスティライラック■#B8A9C5を合わせる例が考えられます。

■#FBFAF2はわずかに黄みを含む明色で、リッチ・ゴールドとのつながりを残しながら報告書ページの広い背景に使えます。■#343222は黄緑みをわずかに含む低彩度の濃色なので、本文、年度、数値、注記を落ち着いて整理できます。■#B8A9C5は紫みを含む低彩度色で、黄から色相を離しつつ鮮やかさを抑えているため、補助タブや別資料への操作に穏やかな変化を加えられます。

レポートページでは、リッチ・ゴールドを年度選択と重要情報に絞る

実装では、本文や数値カードの広い背景を■#FBFAF2にし、選択中の年度タブ、主要指標の見出し、主要な「レポートをダウンロード」ボタン背景へ■#A3B814を使います。その上の文字は白ではなく■#343222にすると、コントラスト比は約5.80:1となり、通常サイズの文字に必要な基準を満たします。本文、数値の補足、注記、出典表示なども■#343222へまとめると、ゴールドを主要な強調箇所へ限定できます。

UI（ユーザーが操作するボタンや年度タブなどの画面部品）の補助操作には、■#B8A9C5を「過去年度を見る」などのボタン背景に使い、文字と枠線を■#343222にします。リッチ・ゴールドの主要ボタンにも■#343222の枠線を付けると、淡い背景との境界を色面だけに頼らず示せます。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#343222と■#FBFAF2は約12.34:1、■#343222と■#A3B814は約5.80:1、■#343222と■#B8A9C5は約5.86:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。

品よく見せるなら、ゴールドやライラックの塗りだけで選択状態を識別させない

■#A3B814と■#FBFAF2のコントラスト比は約2.13:1、■#B8A9C5と■#FBFAF2は約2.11:1です。意味のあるUI部品を識別するための視覚情報には隣接色との3:1以上が求められるため、淡い背景上でゴールドやライラックの塗りだけにボタンやタブの境界を任せるのは避けます。■#343222の枠線や文字を組み合わせると、必要な境界を補えます。

また、「選択中」「公開済み」「参考資料」などの状態は、ゴールドとライラックの色分けだけで伝えず、状態名の文字、チェックマーク、アイコンなども併用します。グラフや写真に黄みの強い色が多い場合は、ページ全体へさらに■#A3B814を広げるより、■#FBFAF2の余白を十分に残す方が、資料と操作を分けやすくなります。HueRollでは■#A3B814をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。