WEBサイトにダークモードを実装してみた

ダークモードについて、実装例、導入すべきかの判断、実装方法、などについてまとめました。

ダークモードとは？

ダークモードとは、画面の背景を黒や濃いグレーに切り替えて表示する機能のことです。

Windows・macOS・iOS・Androidなどは、OS側でダークモード機能が備わっています。もしWEBサイトがダークモードに対応していれば、OS側の設定に連動してライト・ダークモードを自動的に切り替えて表示することができます。

ダークモードを選ぶ人

• 光をまぶしく感じやすい人
• 白背景で文字の輪郭がにじんで見える人
• 暗い場所や夜間に画面を見る人
• スマホの消費電力を抑える目的の人

ダークモードを選ばない人

• 乱視により文字がにじんで見える人
• ライトモードの方が慣れていて見やすい人

ライト・ダーク共通のブランドカラー設定は難しい

ライトモード・ダークモードで全く同じブランドカラーを使用すると、背景色とのコントラスト比が不足し、ウェブアクセシビリティのAA基準（視認性の基準）をクリアできない場合があります。

詳しくはウェブアクセシビリティの記事にまとめています。

AppleやGoogleも、モードごとに同系色のバリエーションを用意しているようです。

Appleの対応策

Appleは、単一の固定色ではなく、ライト・ダークで異なる値に切り替わる「セマンティック（役割）カラー」を採用しています。

Googleの対応策

Googleは、1つのブランドカラーを起点に最適なトーンを割り当てる設計を行っています。

• 基準色から0〜100のトーンパレットを自動生成
• UIの役割ごとに各モードで最適なトーンを割り当て（例えば、ライトモードでは暗めの「トーン40」にしダークモードでは明るめの「トーン80」にする、など）

WEBサイトにダークモードを実装する方法

色をCSS変数として定義し、OS側のダークモード状態をCSSで判定するメディアクエリで切り替えます。

:root {
  --bg: #ffffff;
  --ink: #202124;
  --line: #dddddd;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f0f;
    --ink: #e8eaed;
    --line: #4a4a4a;
  }
}

以下を設定すると、スクロールバーやフォーム部品などブラウザの部品の色も切り替わります。

:root {{ color-scheme: light dark; }}

Webサイトにダークモードを導入すべきか？

ダークモードで見たい人は、すでにOS側の表示を「ダーク」に設定しています。そのため、Webサイト側もOSの設定に自動追従する仕様にしておくのが親切な設計です。

ただし、ブランドイメージの一貫性を最優先したい場合は、あえてダークモードに対応させず、デバイス環境が変わっても常に同じ表示・印象を維持するという選択もあります。

よくある質問（FAQ）

Q. ダークモードにすると目の疲れが軽減されますか？

人によって変わります。光をまぶしく感じやすい人や、暗い場所で作業する人は、目の負担が和らぎます。一方で、乱視のある人はハレーションで文字がにじみ、視力に問題がない人はライトモードのほうが速く読めるという報告もあります。

Q. ダークモードにするとスマホ電力の削減になりますか？

有機EL（OLED）画面なら下がります。黒い部分が消灯して電力を使わないためです。ただし液晶（LCD）は常にバックライトが点灯するため効果は限定的で、削減幅も画面の明るさ次第です。パデュー大学の測定では、明るさ30〜50％で平均3〜9％にとどまりました。

Q. ダークモードのデメリット・注意点はありますか？

あります。乱視のある人は文字がにじんで見えやすく、読む速度が落ちることがあります。純黒と純白の組み合わせは輝度差が強すぎるため、背景は濃いグレー、文字はオフホワイトにして抑えます。濃い青や赤などの色は暗い背景で沈むので、明度を上げた色を別に用意します。

参考文献

• Dark Mode vs. Light Mode: Which Is Better?｜Nielsen Norman Group
• Dark mode may not save your phone’s battery life as much as you think, but there are a few silver linings｜Purdue University
• prefers-color-scheme｜MDN Web Docs
• Understanding Success Criterion 1.4.3: Contrast (Minimum)｜W3C WAI
• Google でダークテーマを使用する｜Google 検索ヘルプ