ポップアップの色はどう選ぶ？目立たせながらサイトになじませる配色

ここでは「ポップアップ」を、ページ上に重ねて表示する小さな告知・案内・キャンペーン用のパネルとして考えます。背景ページの操作を止めるモーダルとは分け、サイトの流れを邪魔しすぎずに必要な情報へ気づいてもらう配色が目的です。全面を強い色で塗るより、背景はサイトのSurface（情報を載せる面）に近づけ、見出し・主要ボタン・上端のアクセントなど一部だけを強くすると、目立ちやすさと統一感を両立しやすくなります。

背景はサイトになじませ、境界と見出しで存在を分ける

以下のHEX（Webで色を表す16進数コード）例では、ページ背景をライトグレー ■#F8FAFC、ポップアップ面を白 ■#FFFFFF にします。この2色のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約1.05:1しかないため、背景差だけでパネルを区切るのは十分ではありません。

パネルの輪郭が必要なら、スレートグレー ■#64748B の枠線を使うと、白 ■#FFFFFF に対して約4.76:1、周囲のライトグレー ■#F8FAFC に対して約4.55:1です。見出しをダークネイビー ■#0F172A にすると白に対して約17.85:1、本文をブルーグレー ■#475569 にすると約7.58:1です。背景を派手にするのではなく、境界・見出し・本文の濃淡で情報の階層を作ります。

強い色は主要ボタンと短いアクセントに集中させる

最も目立たせたい操作だけにロイヤルブルー ■#1D4ED8 を使い、ボタン文字を白 ■#FFFFFF にすると約6.70:1です。同じ色をパネル上端の細いラインや小さなアイコンに繰り返せば、サイトのアクセントカラーと関係を持たせながら、ポップアップ全体を強い色で塗らずに済みます。

閉じる操作は目立たせすぎる必要はありませんが、見失わないようにします。たとえば白 ■#FFFFFF 上の閉じるアイコンをダークブルーグレー ■#334155 にすると約10.35:1です。アイコンだけを使う場合は、見た目の「×」だけでなく、コード上でも「閉じる」と分かるアクセシブルな名前を付けます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上が基準です。また、状態や操作部品を識別するために必要な非テキスト情報は、隣接色との3:1以上が基準です。強調色を選ぶときも、実際に組み合わせる文字・背景・境界との比を確認します。

操作を遮るなら「ポップアップ」ではなくモーダルとして設計する

この配色例は、背景ページをそのまま操作できる小さな案内パネルを想定しています。もし表示中に背景を操作できなくし、ユーザーの注意をそのパネル内へ限定するなら、W3CのDialog (Modal) Patternでいうモーダルダイアログとして扱う必要があります。モーダルでは、開いたときにフォーカスを内部へ移し、Tab移動をダイアログ内に保ち、Escapeなどで閉じられるようにし、閉じた後は適切な位置へフォーカスを戻す設計が重要です。

非モーダルのポップアップでも、キーボードで操作する閉じるボタンや主要ボタンには見えるフォーカス表示を残します。たとえばブルー ■#2563EB のフォーカスリングを白 ■#FFFFFF 上に置くと約5.17:1です。W3CのFocus Visibleでは、キーボードで操作できる要素に見えるフォーカス表示が必要とされています。

HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、ポップアップ背景・文字・枠線・ボタン・フォーカスなど、実際に隣接する組み合わせは別途確認します。