ライト・ゴールドに合う色は？黄みの明るさを爽やかに活かす組み合わせ【#E4F288】

ライト・ゴールド（■#E4F288）は、黄緑をわずかに含んだ明るい黄みの色です。荷物の配送追跡タイムラインでは、「配達中」の現在位置や主要な「受け取り方法を確認」ボタンなど、今見てほしい場所へ絞って使うと、黄みの明るさを爽やかに活かしながら、配送状況、到着予定、配送先を整理しやすくなります。ここでは、ディープオリーブ、ウォームペーパー、ミューテッドバイオレットを組み合わせます。

ディープオリーブで黄みを締め、明るい背景と紫系で役割を分ける

■#E4F288には、現在の配送状況をまとめるパネル用のディープオリーブ■#353821、追跡タイムラインや配送先カードの背景用のウォームペーパー■#FAF8F2、再配達や通知設定などの補助操作用のミューテッドバイオレット■#5A4B70を合わせる例が考えられます。

■#353821は黄緑寄りの暗い低彩度色で、ライト・ゴールドの明るさを残しながら文字や輪郭を引き締められます。■#FAF8F2は少し黄みを含む明色なので、配送拠点、日時、配送先、担当状況など情報量の多い面を軽く保てます。■#5A4B70は紫寄りの落ち着いた濃色で、黄みから色相（赤・青・緑など色みの違い）を離しながら、「再配達を申し込む」「通知設定を変更」などの補助操作を主要な確認操作と分けやすくします。

配送追跡では、ライト・ゴールドを現在位置と主要操作に集める

追跡タイムラインと配送先カードの背景を■#FAF8F2にし、配送拠点名、到着予定、配送先、補足説明を■#353821で表示します。この組み合わせのコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約11.37:1です。

現在の配送状況をまとめるサマリーパネルを■#353821にし、主要な「受け取り方法を確認」ボタン背景、現在位置のマーカー、到着予定日の短いアクセントへ■#E4F288を使います。ボタン上の文字とアイコンを■#353821にするとコントラスト比は約9.98:1で、通常サイズの文字に必要な4.5:1以上を確保できます。ライト・ゴールドのボタン面とディープオリーブのパネルも約9.98:1あるため、暗い面の中で主要操作を区別できます。

一方、■#FAF8F2のタイムライン上で、現在位置を■#E4F288だけで塗ると、2色のコントラスト比は約1.14:1です。色面だけでは状態を十分に識別しにくいため、■#353821の枠線、「配達中」の文字、トラックアイコンを併用します。「再配達を申し込む」「通知設定を変更」などの補助ボタンは■#5A4B70を背景にし、その上を■#FFFFFFの文字にすると約7.85:1です。ミューテッドバイオレットとウォームペーパーの差も約7.39:1あります。

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

爽やかに見せるなら、白文字や色だけの配送状態に頼らない

■#E4F288と■#FFFFFFのコントラスト比は約1.21:1なので、ライト・ゴールド背景へ通常サイズの白文字を置く用途では4.5:1へ届きません。この例では主要ボタンの文字を■#353821にします。

また、「受付済み」「輸送中」「配達中」「配達完了」などを色だけで区別せず、状態名の文字、日時、現在拠点、トラックやチェックのアイコンを併用します。HueRollでは■#E4F288をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。