ダークモードのカラーについて考えてみた

こんにちは、今西です。リモートワークで最近は太陽の差さない暗い部屋で仕事しています（電気は点けていますよ）。

プロジェクトでダークモードがあるデザインを考えることがあり、今回はそのカラースキームの設計について考えてみました。

ダークモードとは

ダークモードは黒系の暗い色を背景ベースカラーとした配色パターンです。対になる白系ベースのライトモードからの切り替えが前提にあるので、モードと呼んだりテーマと呼ばれたりしています。
iOSやAndroidのOSに搭載されたことから、Twitterなどの多くのアプリが対応してきたので普段から慣れ親しんでいる方も多いと思います。

ダークモードを使用するとスクリーンの輝度が落ちるため、目の負担を減らせる、有機ELディスプレイの場合は電力の消費を抑えられる、といった効果があります。具体的には、暗い環境でも見やすい、長時間見るコンテンツに適している、スマホだと電池の減りを抑えられるという利点があります。

カラー選びの原則

ダークモードのカラーを考える前に実践しているカラー設計の原則をおさらい。 色は「色相」「彩度」「明度」の属性があり、この属性の値やバランスを調整して配色を決めていきます。

デザインの色を考えるときは、まず全体的な印象になるテーマカラー／メインカラーを決めます。デザインするものコンセプトや訴求するイメージをもとに与えたい印象から色を戦略的に選びます。 サブカラーはプライマリーと協調する色を選びます。メインカラーの補色や同じ明度の色相違いの色を選ぶとうまく調和する色を作りやすいです。

カラースキーム選びの大事なところは、色属性のルールを基本としてゴールとなるコンセプトやイメージを印象づける配色をしていくところにあります。コンセプトやイメージ＝ブランディングでもあります。

アクセシビリティ

カラーの設計において、デザインのテーマや印象だけではなくアクセシビリティも抑えておきたいところです。 ちゃんとその色の要素が視認できることは、設計の段階から最低限担保すべき要件であると思います。

アクセシビリティを満たすコントラスト比は、文字サイズの大きさや要素によってLevel AA（4.5以上）とLevel AAA(7.0以上）の基準で定められています。サービスやプロダクトにもよると思いますが、背景色とのコントラスト比Level AAは最低限取るべきと言われます。

またダークモードの場合は背景が暗いので眩しいギラギラ目立つ色になりがちです。彩度の高い色を使うとチカチカしてしまうので、彩度は控えめに調整します。

どうやったか

ダークモードはあくまで「モード」もしくは「テーマ」です。表面の色が切り替わっても、全体の色のコンセプトは変わりません。 今回のデザインではライトモードで決めたカラーをベースにダークモードのカラースキームを選定しました。ダークモードで共通化することが難しいメインカラーを設定していたため、ダークモードの背景色での印象が同じになるようにメインカラーは調整しています。

ダークモードでの配色の調整について、色相、彩度や明度の値を操作することで色を決めていくこともできますが、私は数字はあくまでざっくりあたりをつける程度に使いました。 色は見たときの印象が大事なので、基本は目視での調整です。画面を近づけたり引いたりして目で見て確認、コントラストの値も注意しながらカラーピッカーを上げ下げして選びます。彩度を低めにすると見えやすいが白っぽくなりがちなので、若干ですが色相も変化させながらトーンを決めていきました。コントラスト比は、暗めの色でもLevel AAとなる最低限の4.5を目指して調整しました。

Figmaを使ってデザインを進めていたのですが、コントラスト比をリアルタイムで表示してくれるプラグインや色のスタイル登録の機能が非常に便利でした。

Contrast
Able – Friction free accessibility

まとめ

ダークモードといっても、配色の基本は変わりません。テーマカラーから展開して調和する色を背景色にあわせて決めていきます。視認しやすさを担保するためのコントラストを担保する色でカラーパレットをスタイルをつくっていきます。
配色に制約がありルールが増えますが、コンセプトから外れないよう色を選ぶ作業の中ではあまり気になりませんでした。どちらかというと、コントラストの担保や色のトーンを作っていくバランスに慎重になって進めていた印象です。

今回のダークモードの色の設計で、与える印象や視認性の担保など改めてカラースキームの選定について細かく考える機会になりました。色の細かな調整が必要になりましたが、暗い背景にきれいな配色が並ぶとなかなか良い気分になります。しっかり色を設計する考えが自分の中でも固まってきたので、今後にも活かしていきたいと思います。