ビビッド・ゴールドに合う色は？鮮烈な黄みを明快に見せる組み合わせ【#E3FF1F】

ビビッド・ゴールド（■#E3FF1F）は、黄にわずかな緑みを含む、非常に明るく鮮やかな色です。ここでいう「ゴールド」は金属の光沢を再現する表現ではなく、HueRoll上の色名として扱います。メール受信箱では、選択中の重要メール、スター付きフィルター、主要な「新規メールを作成」ボタンなどに絞って使うと、鮮烈な黄みを明快に見せながら件名や送信者情報を整理しやすくなります。ここでは、ソフトアイボリー、インクスレート、ディープブルーを組み合わせます。

ソフトアイボリーを土台にし、濃いスレートとブルーで黄を引き締める

■#E3FF1Fには、受信箱やメール本文の背景用のソフトアイボリー■#FCFBEE、件名・送信者名・時刻・枠線用のインクスレート■#242B3A、アーカイブやフォルダー移動などの補助操作用のディープブルー■#344E7Aを合わせる例が考えられます。

■#FCFBEEは黄みをわずかに含む明色で、メール一覧や本文の広い面を軽く保てます。■#242B3Aは青みを少し含む低彩度の濃色なので、件名、送信者名、受信時刻、本文を主役色より落ち着いて整理できます。■#344E7Aは青寄りの濃色で、黄から色相（赤・青・緑など色みの違い）を大きく離しながら鮮やかさを抑えているため、「アーカイブ」「フォルダーへ移動」などの補助操作を主要操作と分けやすくなります。

メール受信箱では、ビビッド・ゴールドを重要メールと主要操作に使う

実装では、メール一覧と本文の背景を■#FCFBEEにし、件名、送信者名、時刻、本文を■#242B3Aにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約13.61:1です。

選択中の重要メール、スター付きフィルター、主要な「新規メールを作成」ボタン背景へ■#E3FF1Fを使い、その上の文字と枠線を■#242B3Aにすると約12.55:1です。通常サイズの文字に必要な4.5:1以上を十分に確保できます。一方、■#E3FF1Fと■#FCFBEEの差は約1.09:1しかないため、明るい背景上では黄色の塗りだけで選択状態やボタンの境界を示さず、■#242B3Aの枠線やアイコンを併用します。この枠線と■#FCFBEEの背景は約13.61:1です。

「アーカイブ」「フォルダーへ移動」などの補助ボタンは■#344E7Aを背景にし、その上の文字を■#FFFFFFにすると約8.34:1です。ディープブルーとページ背景の差も約8.02:1あり、■#E3FF1Fとの比率は約7.39:1です。

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

明快に見せるなら、重要・未読・選択中を黄色だけで伝えない

■#E3FF1Fと■#FFFFFFのコントラスト比は約1.13:1なので、ゴールド背景へ通常サイズの白文字を置く使い方は避けます。主要ボタンには■#242B3Aの文字を使い、明るい背景上では同じ濃色の枠線も残します。

また、「重要」「未読」「選択中」「返信済み」などを色だけで表さず、スターの形、未読件数、太字の件名、チェックマーク、状態名の文字なども併用します。HueRollでは■#E3FF1FをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。