ブリリアント・ゴールドに合う色は？鮮やかな黄みを軽快に引き立てる組み合わせ【#E4F764】

ブリリアント・ゴールド（■#E4F764）は、わずかに黄緑みを含む明るく鮮やかな黄です。ここでいう「ゴールド」は金属の光沢を再現する表現ではなく、HueRoll上の色名として扱います。請求書の支払い管理画面では、選択中の請求書、主要な「支払いを記録」ボタン、支払期限の短いアクセントなどに絞って使うと、鮮やかな黄みを軽快に見せながら、請求先や金額、期限を整理しやすくなります。ここでは、インクインディゴ、ウォームアイボリー、ミューテッドティールを組み合わせます。

インクインディゴで黄を引き締め、アイボリーとティールで役割を分ける

■#E4F764には、選択中の請求書や主要操作をまとめるパネル背景用のインクインディゴ■#252A44、請求書一覧や詳細カードの背景用のウォームアイボリー■#FCFAEE、支払い履歴や取引先情報などの補助操作用のミューテッドティール■#3D6662を合わせる例が考えられます。

■#252A44は青紫をわずかに含む低彩度の濃色で、明るい黄との明度差を大きくできます。■#FCFAEEは黄みをわずかに含む明色なので、請求先、請求番号、金額、支払期限などを読む面を軽く保てます。■#3D6662は青緑寄りの落ち着いた色で、黄から色相（赤・青・緑など色みの違い）を離しながら、「支払い履歴を見る」「取引先情報を確認」などの補助操作を主要な記録操作と分けやすくします。

請求管理画面では、ブリリアント・ゴールドを選択中の請求書と主要操作に集める

実装では、請求書一覧と詳細カードの背景を■#FCFAEEにし、請求先、請求番号、金額、支払期限、補足説明を■#252A44にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約13.43:1です。

選択中の請求書をまとめるパネルを■#252A44にし、主要な「支払いを記録」ボタン背景、支払期限の短いアクセント、現在選んでいる月の表示へ■#E4F764を使います。ボタン上の文字とアイコンを■#252A44にすると約11.91:1で、通常サイズの文字に必要な4.5:1以上を確保できます。ゴールドのボタン面とインディゴのパネルも約11.91:1あるため、主要操作を暗い背景から明確に区別できます。

「支払い履歴を見る」「取引先情報を確認」などの補助ボタンは、明るい■#FCFAEEのエリアに■#3D6662を背景として置き、その上の文字を■#FFFFFFにすると約6.41:1です。ミューテッドティールとウォームアイボリーの差も約6.12:1あります。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上が必要です。また、意味のあるUI（ユーザーが操作するボタンや選択欄などの画面部品）を識別するために必要な視覚情報には、隣接色との3:1以上が基準になります。

軽快に見せるなら、白文字や支払い状態の色分けだけに頼らない

■#E4F764と■#FFFFFFのコントラスト比は約1.18:1なので、ゴールド背景へ通常サイズの白文字を置く使い方は避けます。この例では主要ボタンの文字を■#252A44にします。

また、「未払い」「処理中」「支払済み」などの状態を色だけで区別せず、状態名の文字、金額、支払日や期限、チェックや時計などのアイコンを併用します。明るい■#FCFAEEの上では、■#E4F764との差が約1.13:1しかないため、細い黄色の枠や淡い帯だけで選択状態を示すのも避けます。HueRollでは■#E4F764をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。