ビビッド・グリーンに合う色は？鮮烈な緑をフレッシュに際立たせる配色例【#1FFF57】

ビビッド・グリーン（■#1FFF57）は、シアン側へわずかに寄った、非常に明るく鮮やかな緑です。イベントの来場受付画面では、選択中の参加者、主要な「受付を完了」ボタン、受付済みを示すアクセントなどに絞って使うと、鮮烈な緑をフレッシュに見せながら参加者名やチケット情報を整理しやすくなります。ここでは、セージホワイト、フォレストインク、ミューテッドバイオレットを組み合わせます。

セージホワイトを土台にし、フォレストインクとバイオレットで役割を分ける

■#1FFF57には、ページ背景用のセージホワイト■#F6FBF7、参加者名・チケット種別・時刻・枠線用のフォレストインク■#14331F、予約内容の確認などの補助操作用のミューテッドバイオレット■#5A3F6Bを合わせる例が考えられます。

■#F6FBF7はごく淡い緑みを含む明色で、参加者一覧や受付カードの広い面を軽く保てます。■#14331Fは緑みを含む低彩度の濃色なので、氏名、チケット種別、受付時刻、注意事項などを主役色より落ち着いて整理できます。■#5A3F6Bは紫寄りの低彩度色で、緑から色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「予約内容を見る」などの補助操作を主要な受付操作と分けやすくなります。

来場受付では、ビビッド・グリーンを選択中の参加者と受付完了操作に使う

実装では、参加者一覧と未選択の受付カードを■#F6FBF7にし、参加者名、チケット種別、受付予定時刻、補足説明を■#14331Fにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約13.17:1です。

選択中の参加者カードや主要な「受付を完了」ボタン背景へ■#1FFF57を使い、その上の文字と枠線を■#14331Fにすると約10.18:1です。通常サイズの文字に必要な4.5:1以上を十分に確保できます。一方、■#1FFF57と■#F6FBF7の差は約1.29:1しかないため、明るい背景上では緑の塗りだけでカードやボタンの境界を示さず、■#14331Fの枠線やアイコンを併用します。この枠線と■#F6FBF7の背景は約13.17:1です。

「予約内容を見る」などの補助ボタンは■#5A3F6Bを背景にし、その上の文字を■#FFFFFFにすると約8.91:1です。ミューテッドバイオレットとページ背景の差も約8.51:1あり、■#1FFF57との比率は約6.57:1です。

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

フレッシュに見せるなら、受付済み・未受付・要確認を緑だけで伝えない

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

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