モーダルの背景色はどう決める？オーバーレイとのバランスを整える方法

モーダルは、背景ページの操作を一時的に止め、確認・入力・選択などを前面のダイアログ内で行うUI（ユーザーインターフェース）です。配色では、モーダル面だけを強くするより、背景を暗くするオーバーレイとの組み合わせで前後関係を作ることが大切です。モーダル面は読みやすい明るいSurface（情報を載せる面）に保ち、オーバーレイは背景を十分に沈めつつ、元のページがあることは分かる程度に調整します。

モーダル面は明るく保ち、オーバーレイで背景を沈める

以下のHEX（Webで色を表す16進数コード）例では、モーダル面を白 ■#FFFFFF にします。オーバーレイは、ダークネイビー ■#0F172A を55%前後の不透明度で重ねる方法が一例です。これはWCAGの固定基準ではなく、背景の写真・文字量・明るさによって調整するための出発点です。

オーバーレイが薄すぎると背景の文字や画像がモーダルと競合し、濃すぎると元のページとのつながりが見えにくくなります。背景が明るく情報量も多いページではやや濃く、単純な背景では少し弱くするなど、実際のページ上で確認します。W3CのDialog (Modal) Patternでは、モーダルの外側は操作できないinert（非操作）状態になり、通常は視覚的にも暗くして外側の内容を判別しにくくすることが説明されています。

文字と主要ボタンは、モーダル面とのコントラストを確保する

白 ■#FFFFFF のモーダル面に、見出しをダークネイビー ■#0F172A とすると約17.85:1、本文をブルーグレー ■#475569 とすると約7.58:1です。閉じるアイコンをダークブルーグレー ■#334155 にすると約10.35:1です。

主要ボタンには、モーダル面と十分な差が出るティール ■#0F766E を使う例があります。白 ■#FFFFFF の文字を置くと約5.47:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上が基準です。状態や操作部品を識別するために必要な非テキスト情報は、隣接色との3:1以上が基準です。

オーバーレイだけでなく、フォーカスと背景の非操作化もそろえる

モーダルは見た目だけ暗くすればよいわけではありません。W3CのDialog (Modal) Patternでは、開いたときにフォーカスをダイアログ内へ移し、TabとShift＋Tabでダイアログ内を移動し、Escapeで閉じられるようにすることが示されています。閉じた後は、基本的に呼び出し元など適切な要素へフォーカスを戻します。

HTMLの <dialog> を showModal() で開く場合、ブラウザーは同じ文書内のダイアログ外をinertにし、::backdrop で背景側の見た目を調整できます。独自実装で aria-modal="true" を使う場合も、見た目だけではなく、実際に背景を操作できない状態にしてからモーダルとして扱います。

キーボードフォーカスにはブルー ■#2563EB のリングを使う例があります。白 ■#FFFFFF に対して約5.17:1です。HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、モーダル面・文字・ボタン・フォーカスなど実際の組み合わせは別途確認します。