ダークモードの可読性リスク
コントラスト・にじみ・階層を、目視ではなく数値で測る
これは私のダークモードの配色です：［色値またはスクリーンショット］。可読性のリスクを、項目ごとに数値で評価してください：1）本文・補助テキスト・プレースホルダー・無効状態と、それぞれの背景とのコントラスト比（4.5:1 を下回るものを指摘する）；2）背景を純黒にするか #121212 のような浮いた面にするか、トレードオフつきで理由を示す；3）暗い背景で振動して見える高彩度色はどれか、彩度を下げるか明度を上げる必要がある；4）影はダークモードではほぼ見えないため、階層を何で表すか；5）画像、白背景のイラスト、1px の区切りの扱い；6）10 分以上読み続けたときの疲労点。最後に修正後のパレットを示してください。
使い方
ダークモードの読みやすさはモニターで判断せず、スマートフォンで明るさを 30% にして確認してください。
向いている場面
- 来週ダークモードを公開する予定で、デザインカンプはブランドカラーの暗い版をそのまま使っています。まず、実機で読めない組み合わせがどれかを知る必要があります。
- iOS と Android でダークモードの指針が違い、チームは 1 つに揃えたいと考えています。先にリスクを数値化し、そのうえでプラットフォームごとに分けるべき箇所を決めます。
向いていない場面
- ライトの画面を一度反転しただけのものをダークモードと呼んでいる場合です。反転はデザインではないので、評価ではなく作り直しが必要です。
- 画像閲覧が中心で文字がごく少ない製品の場合です。コントラストは弱点ではないので、画像の明るさ調整を優先します。
例
入力
ダーク画面：背景 #000000、本文 #FFFFFF、補助テキスト #8A8A8E、主ボタン #0A84FF に白文字、カードは純黒の上に rgba(255,255,255,0.06)、1px の区切り線は rgba(255,255,255,0.1)
得られるもの
本文と純黒のコントラストは 21:1 ですが、純黒に純白は OLED でにじみが出るため、背景を #121212、本文を #E6E6E6 にする案を示します（それでも 15.8:1）。補助テキスト #8A8A8E は #121212 に対して 4.3:1 しかないので #A1A1A6 まで上げます。主ボタンの白文字は #0A84FF に対して 3.0:1 で基準に届かず、文字を暗くするか青を #409CFF まで明るくします。区切り線は不透明度 0.1 では純黒上で見える下限を下回るため 0.16 に上げます。階層は影ではなく、面の明度差と 1px の罫線で表します。
よくある誤用
- 本文のコントラストだけを確認する場合です。実際に読みにくいのは補助テキスト、プレースホルダー、無効状態であることが多いです。
- ダークモードを純黒と高彩度色で作る場合です。色の縁ににじみが出て、長時間見るとライトより疲れます。
こう変えると効く
- 「OLED の省電力向けに純黒の版、読書向けに #121212 の版を作り、両方を比べる」に変えます。1 つの製品で 2 つの選択を併存させられます。
- 「ダークモードでのブランドカラー置換表」を足します。ブランド色は個別に明度を上げる必要があり、そのまま流用できません。