ピュア・シャルトリューズに合う色は？純度の高い黄緑を爽快に引き立てる配色例【#80FF00】

ピュア・シャルトリューズ（■#80FF00）は、黄色と緑の中間にある非常に明るく鮮やかな黄緑です。イベントの入場受付やチケット確認画面では、主要な「チケットをスキャン」ボタン、選択中の受付レーン、現在処理している項目などに使うと、純度の高い黄緑を爽快なアクセントとして見せやすくなります。ただし、白に近い背景では明るさの差が小さいため、黄緑の塗りだけでボタンや選択状態を示すと境界が分かりにくくなる場合があります。ここでは、インクネイビー、フロストアイボリー、ディープバイオレットを組み合わせます。

インクネイビーで輪郭を締め、明るい背景とバイオレットで役割を分ける

■#80FF00には、本文・受付番号・枠線用のインクネイビー■#20263A、画面や来場者カードの背景用のフロストアイボリー■#F7FAF2、手動検索などの補助操作用のディープバイオレット■#523A74を合わせる例が考えられます。

■#20263Aは青みを含む低彩度の濃色で、黄緑の鮮やかさを抑えずに文字や輪郭を明確にできます。■#F7FAF2は黄緑をわずかに含む明色なので、来場者名、受付時刻、チケット種別などを読む面を軽く保てます。■#523A74は紫寄りの濃色で、黄緑から色相（赤・青・緑など色みの違い）を大きく離しつつ鮮やかさを抑えているため、「手動で検索」「受付履歴を見る」などの補助操作を主要操作と分けやすくなります。

入場受付画面では、シャルトリューズを主要スキャン操作と現在位置に集める

実装では、画面全体と来場者カードの背景を■#F7FAF2にし、主要な「チケットをスキャン」ボタン、選択中の受付レーン、現在処理しているチケットの見出しへ■#80FF00を使います。その上の文字・アイコン・枠線を■#20263Aにすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約11.59:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

来場者名、チケット種別、受付番号、時刻は■#20263Aにし、■#F7FAF2との比率は約14.22:1です。「手動で検索」などの補助ボタンは■#523A74を背景にし、その上の文字を■#FFFFFFにすると約9.48:1です。バイオレットとページ背景の差も約8.98:1あります。

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

爽快さを保つなら、明るい面では濃い枠線を残し、受付状態を色だけで伝えない

■#80FF00と■#F7FAF2のコントラスト比は約1.23:1、■#80FF00と■#FFFFFFも約1.29:1です。そのため、明るい画面上に黄緑のボタンや選択カードを置く場合は、塗りだけを境界にせず、■#20263Aの枠線・文字・アイコンを併用します。鮮やかな黄緑の上に白の通常文字を置く使い方も避けます。

また、「未受付」「受付済み」「確認が必要」などの状態をシャルトリューズとバイオレットの色分けだけで伝えず、状態名の文字、チェックマーク、警告アイコン、受付時刻なども組み合わせます。■#80FF00と■#523A74のコントラスト比は約7.32:1ですが、状態の意味を色の差だけに依存させない方が受付担当者が判断しやすくなります。HueRollでは■#80FF00をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。