スマホでダークモードを使うときの色選び｜黒つぶれを防ぐ配色
スマホのダークモードでは、画面を暗くしたつもりでも、カードの境目や写真の暗い部分が見分けにくくなることがあります。暗い部分の違いが失われて見える状態は「黒つぶれ」と呼ばれます。ただし、写真の階調が失われる現象は画像そのものや端末の表示にも左右され、背景色だけで必ず解決するわけではありません。今回は小さな画面で暗色を使い分ける方法を紹介します。
真っ黒に統一せず、暗い面の境界を別の手段でも示す
ダークモードは、暗い背景を使う表示方法です。ページ全体、情報カード、文字を同じ明るさにせず、役割に応じて分けます。スマホではカードが縦に続き、暗い面同士の違いが目立ちにくいため、少し明るいカード背景だけに頼らず、余白や輪郭線を組み合わせることが大切です。
文字もすべて純白にする必要はありません。見出しや時刻には明るい文字、補足情報には少し落ち着いた文字を使い、背景との実際のコントラストを確保します。補足を弱く見せようとして暗いグレーにしすぎると、画面の明るさを下げたときに見失うおそれがあります。
写真や地図の影がつぶれて見える場合は、画像の暗部が元から失われていないかも確認します。ページ背景の明るさを変えることと、写真そのものの暗い部分を調整することは別の作業です。端末の画面設定や周囲の明るさによっても見え方が変わるため、特定のHEXコードだけで黒つぶれを防げるとは断定できません。
夜間バスの時刻検索画面を8色で整える例
スマホで夜間バスの便を探す画面を想定します。「出発時刻・到着時刻・運行状況」をカードごとに表示し、選んだ便から予約画面へ進みます。以下のHEX（#の後に6桁の数字と英字で表す色コード）は、この画面向けの提案です。
ページ背景を黒に近い青灰 ■#141B24、便のカード背景を一段明るい青灰 ■#252F3B にします。この二色のコントラスト比は約1.28:1で、背景差だけではカードの範囲を十分に伝えられません。カード間に余白を設け、輪郭にブルーグレー ■#8396A6 の線を加えます。この線とカード背景 ■#252F3B の比は約4.44:1、ページ背景 ■#141B24 に対しては約5.68:1です。
出発・到着時刻と便名は明るいグレーホワイト ■#E6EDF4 をカード背景 ■#252F3B に載せ、文字のコントラスト比は約11.49:1です。ページ背景 ■#141B24 上では約14.67:1になります。所要時間や乗り場などの補足情報は少し落ち着いたブルーグレー ■#B6C6D7 にし、カード背景 ■#252F3B との比は約7.78:1です。補足文字を暗くしすぎず、文字の大きさや太さでも優先順位を調整します。
選択した便の左側には、明るいシアン ■#79DADC の太い縦線と「選択中」という文字を付けます。線とカード背景 ■#252F3B の比は約8.31:1です。選択中を色だけで表さず、文字で状態を伝えます。「この便を予約する」ボタンは同じシアン ■#79DADC を背景に、濃い青灰 ■#10272D の文字を載せます。ボタン内の比は約9.54:1、ボタンとカード背景 ■#252F3B の比は約8.31:1です。
キーボードで操作する人のため、現在選択している操作部品には淡いアンバー ■#FFCF83 のフォーカス線を付けます。カード背景 ■#252F3B に対する比は約9.37:1です。フォーカスは「いま操作する位置」、選択中は「選んだ便」なので、同じ表示にはしません。
画面の明るさとモード切替を含めて確認する
完成後は、スマホの明るさを下げた状態でも時刻・補足・輪郭線が見えるか、文字を拡大してもカードの対応関係が崩れないかを確認します。暗い写真や路線図があれば、カードとは別に細部が失われていないか見ます。色の数値が基準を満たしても、実際の端末の表示を保証するものではありません。
CSS（WEBページの見た目を指定する仕組み）のprefers-color-schemeは端末などの明暗設定を検出する仕組みです。自動で切り替える場合も、背景と文字をセットで変更し、入力欄・ボタン・ブラウザー標準の部品も確認します。利用者が明るい表示を選べる設計なら、その選択がページ移動後も保たれるかを試しましょう。
WCAG 2.2（Webコンテンツのアクセシビリティ指針）では、通常サイズの文字は背景に対して4.5:1以上、大きな文字は3:1以上が基本です。操作部品や状態を識別するために必要な線なども、原則として隣接色との3:1以上を確認します。HueRollは選択色と白・黒とのコントラストを確認できますが、任意の2色の直接比較やAA・AAAの自動判定はできません。カード背景 ■#252F3B と輪郭線 ■#8396A6 などは別途計算して採用してください。