ダークモードの配色 ― 明暗を反転しない設計

反転ではうまくいかない

ライトモードの白背景・黒文字を、そのまま黒背景・白文字に反転すると、たいてい見づらくなります。真っ黒の上の真っ白な文字はまぶしく、輪郭がにじんで(ハレーションで)読みにくくなるためです。ダークモードは反転ではなく、作り直すものだと考えます。

真っ黒・真っ白を避ける

背景は完全な黒ではなく、少し明るい黒(たとえば #121212 前後)にします。文字も純白を避け、わずかに明度を落とした白にします。コントラストは十分に確保しつつ、最大にはしない。これでまぶしさとにじみが和らぎます。

彩度を少し下げる

暗い背景の上では、鮮やかな色はギラついて浮いて見えます。ライトモードと同じ色をそのまま使わず、彩度を少し落とし、明度を上げた色に調整すると、落ち着いてなじみます。

階層は明るさで作る

ライトモードでは影で手前・奥を表しますが、暗い背景では影が見えません。ダークモードでは、手前にある面ほど背景より明るくして、明度の差で階層を表します。

まとめ

ダークモードは反転ではなく作り直しです。背景は真っ黒を避けて少し明るい黒に、文字は真っ白を避け、色は彩度を控えめに、階層は明るさで。これが目に優しく見やすいダークモードの基本です。