ライトモードとダークモードで色をどう変える？配色設計の基本
ライトモードでは見やすいWEBサイトでも、背景だけを暗くすると文字やボタンが見つけにくくなることがあります。ライトモードは明るい背景を中心とした表示、ダークモードは暗い背景を中心とした表示です。両方を用意するときは単純な色の反転ではなく、背景・文字・操作の役割を保ちながら組み合わせを作り直します。
色の役割をそろえ、各モードの組み合わせを決める
最初に「ページ背景」「カード背景」「本文」「補足文」「主要ボタン」「入力欄の境界」という役割を分けます。例えば、ライトモードのボタンが主要な申込み操作なら、ダークモードでも同じボタンを最も重要な操作として見せます。色そのものが変わっても、利用者が迷わない位置と役割を保つことが大切です。
ダークモードは黒い背景と真っ白な文字だけで作る必要はありません。少し青みのある暗色と明るいグレーを合わせたり、暗い背景に埋もれるブランドカラーを明るく調整したりできます。反対に、ライトモードで使った淡い背景色をそのままダークモードの文字色やボタン色へ機械的に置き換えると、操作の優先順位が変わる場合があります。
配色は一つの色ではなく、隣り合う色との関係で確認します。文字には背景との明るさの差、ボタンには文字と塗り色の差に加えて周囲との区別が必要です。色の印象も画面の面積や写真によって変わるため、同じページ構成で二つのモードを比較しましょう。
申込みページでライトとダークの色を比較する
架空のオンライン講座の申込みページを例にします。HEXコードは色を16進数で表す記法です。ライトモードはページ背景を淡い青灰 ■#F6F8FA、申込みカードを白 ■#FFFFFF、見出しと本文を濃い青灰 ■#263445 にします。本文とページ背景のコントラスト比は約11.89:1、白いカード上では約12.65:1です。
ライトモードの補足文はグレー ■#526476 と白背景 ■#FFFFFF の組み合わせで約6.10:1とします。「申し込む」ボタンは濃い青 ■#1C5D82 の塗りと白文字 ■#FFFFFF を使い、文字とボタン背景の比は約7.15:1です。カードと画面の淡い背景は近い色なので、余白と見出しで領域を区切ります。
ダークモードではページ背景を暗い青灰 ■#151E29、カードを一段明るい ■#233141 にし、見出しと本文を柔らかな白 ■#F1F5F7 にします。本文とページ背景の比は約15.32:1、カード上では約12.06:1です。黒と白を単純に交換せず、カードの階層を明るさの違いで残します。
ダークモードの補足文は明るいグレー ■#CBD6DE とカード背景 ■#233141 の組み合わせで約8.96:1です。主要ボタンには明るい水色 ■#83C9EB、文字には濃い青灰 ■#132535 を使い、ボタン内の文字コントラスト比を約8.57:1とします。この明るいボタンは暗いカード ■#233141 とも約7.26:1の差があります。
ライトモードのボタン色 ■#1C5D82 をダークモードのカード ■#233141 にそのまま載せると、色面同士の比は約1.85:1です。文字色だけを白にしても、ボタンの輪郭を周囲から見つけにくい場合があります。主要操作にはダークモード用の色も用意しましょう。
切替方法と操作状態まで確かめる
CSS（WEBページの見た目を指定する仕組み）では、色に「ページ背景」「文字」などの役割名を付けて管理すると、テーマごとの変更を整理できます。ユーザーの端末やブラウザーの表示設定に合わせる場合は @media (prefers-color-scheme: dark) で暗い表示用の値を指定できます。color-scheme は、フォーム部品などブラウザー側の表示が対応する配色方式を示す指定であり、ページ内の独自デザインをすべて自動で塗り替えるものではありません。
WCAG（Web Content Accessibility Guidelines、WEBコンテンツを利用しやすくするための指針）2.2のAA（適合レベルの一つ）では、通常の文字と背景には4.5:1以上、規定の大きな文字には3:1以上のコントラスト比が必要です。操作を識別するための枠線や状態表示にも、隣接色との3:1以上が必要な場合があります。上記の数値は不透明な指定色の計算結果で、画面全体の適合を保証するものではありません。
入力欄、エラー表示、選択中のメニュー、リンクやフォーカス表示も両モードで確認します。色だけで状態を示さず、ラベルや輪郭、下線を併用します。画像やロゴに明るい部分がある場合は、背景の切替後も輪郭が失われないか確かめましょう。手動切替を用意するなら、利用者が選んだモードを優先できる設計も検討します。
HueRollではHEXコードから濃淡や配色候補、選択色と白・黒のコントラストを確認できます。ただし任意の2色同士の比較やAAの自動判定はできません。各モードで実際に隣り合う色を別途検証し、スマートフォンでも見出しから申込みまで同じ順序で操作できるか点検してください。