ダークモードの配色はどう決める？背景色・文字色・アクセントの選び方
ダークモードは、WEBサイトの背景を暗くしただけでは使いやすくなりません。文字だけ明るくしても、カードの区切りやボタン、入力エラーが背景に埋もれることがあります。ここでは暗い配色を一から設計する場合に、背景・文字・アクセントカラーの役割を決め、操作の分かりやすさまで確認する方法を紹介します。
背景の階層を作り、文字の役割を整理する
最初に、ページ全体とその上に置くカードの背景を分けて考えます。画面のすべてを同じ黒にする必要はありません。少し明るさの異なる暗色を使うと、どの情報が一まとまりかを整理できます。ただし暗い色同士の差は小さくなりやすいため、操作するカードには必要に応じて輪郭や余白を加えます。
次に、見出し・本文・補足文へ明るい文字色を割り当てます。見出しと本文の違いは色だけでなく文字サイズや太さでも表現し、補足文を薄くしすぎないようにします。暗い背景と白文字の組み合わせがすべての場所で最適とは限りません。背景ごとに文字色を確認することが大切です。
アクセントカラーは、リンクや主要ボタンなど、利用者が操作する場所を示すために使います。暗い背景に濃いブランドカラーをそのまま置くと色面が目立たなくなることもあるため、明るい候補を用意します。色だけで「選択中」「要確認」などを表さず、文字や記号も併用しましょう。
チケット予約ページの具体的な配色例
架空のイベント予約ページを例にします。HEXコードは、色を16進数で表す記法です。ページ全体には暗い青灰 ■#151C26、予約情報のカードには一段明るい青灰 ■#253241 を使います。両背景のコントラスト比は約1.31:1なので、色の違いだけを操作可能なカードの境界として使いません。
見出しと本文には淡い白 ■#EBF1F5 を合わせます。ページ背景 ■#151C26 との文字コントラスト比は約15.04:1、カード背景 ■#253241 では約11.44:1です。日付や補足には青みのある明るいグレー ■#BED0DC を使い、カード背景との比は約8.22:1です。文字の役割を分けながらも、細かい情報を読める明暗差を確保します。
「予約する」の主要ボタンは明るい水色 ■#82D4E6、ボタン文字は濃い青灰 ■#122636 にすると約9.22:1です。水色のボタンとカード背景 ■#253241 の差も約7.76:1あります。一方、同じ水色に白文字 ■#FFFFFF を載せると約1.68:1に下がるため、明るいボタンでは文字色もセットで決めます。
予約日を選ぶ入力欄にはカードと同じ暗色を使い、枠線にはグレー ■#8B9EAD を合わせます。枠線とカード背景 ■#253241 の比は約4.71:1です。選択した日付は「✓ 選択中」のラベルなどでも示し、色だけで選択状態を区別しないようにします。
エラー案内には暗い赤茶 ■#4A2B31 を背景、淡いサーモン ■#FFD4C2 を文字にすると約9.19:1です。ただしエラー背景とカード背景の差は小さいため、明るいサーモン ■#FFBDA6 の輪郭線と「! 日付を選択してください」という文言を添えます。この輪郭線はカード背景 ■#253241 と約8.12:1の差があります。
フォーカス・コントラスト・画面幅を最終確認する
キーボード操作中の場所を示すフォーカスには、例えば明るい黄みの ■#E8B871 を輪郭線として使えます。カード背景 ■#253241 との比は約7.15:1です。ただし水色のボタン ■#82D4E6 と隣接すると約1.09:1しかないため、ボタンとの間隔を空けたり二重線にしたりして、どの要素にフォーカスがあるか確認します。
WCAG（Web Content Accessibility Guidelines、WEBコンテンツを利用しやすくするための指針）2.2のAA（適合レベルの一つ）では、通常の文字と背景は4.5:1以上、規定の大きな文字は3:1以上のコントラスト比が必要です。操作に必要な枠線や状態表示などの非テキスト情報も、隣接色との3:1以上が求められる場合があります。上記は不透明な指定色同士の計算結果で、ページ全体の適合を保証するものではありません。
スマートフォンではカードが縦に並び、ボタンの位置や説明文の折り返しが変わります。通常表示だけでなく、選択中・入力エラー・フォーカス時も点検しましょう。写真や半透明の背景が入る場合は、実際に重なった色でコントラストを測り直します。
HueRollではHEXコードを入力し、濃淡や配色候補、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色間の比率やAAの自動判定には対応していません。暗い背景の上で重要な情報と操作が迷わず見つかるよう、背景・文字・アクセントを一組で調整してください。