ディスプレイにおいて、目に優しい配色とは

私たちは毎日の生活で日常的にスマホ、仕事などでパソコン、家ではTVなど、ディスプレイを見る時間が長くあり目が疲れて、視力の低下につながってしまいます。

私自身も新卒の際に長時間PCを見すぎて目が痛くなり、当時の会社の上司に相談したところ、エディタやディスプレイの背景を黒に設定したところ(今でいうダークモード)目が痛くなくなったという経験がありました。

そこで今回は、Webサイトをはじめとしたディスプレイのデザインを行うときに「目が疲れない」は無理ですが「目が疲れにくい」のはどのような配色かをまとめていきます。

ローコントラストな配色を

 
瞳孔の疲労をさげるにはコントラストを強くしすぎない事が挙げられます。
コントラストとは、違う色同士の対比から生じる差のことで、その差が大きいほどコントラストが強くなります。

色数を増やしすぎない

情報として色を認識し、目の動きが多くなってしまうため。
 

配置を散らばさない

色数と同じような理由のため。
 

文字は真っ黒でなくグレー

 
コントラストの続きになるが、白との対比では真っ黒よりもグレーの方がコントラストは弱くなる。
また、黒やグレーは白よりはブルーライトが削減される。ブルーライトでいうとブルー系よりもオレンジ系のほうが少ない。

赤の使用をさける

 
赤は日常的にエラーなどの警告色に使用される色。身体への影響として交感神経を優位にし脳を興奮させる作用があるため、脳と目は関係性が深いため、結果として目の疲労につながりやすくなる。
 

例えば、超時間滞在が予測されるメディア系のWebサイトや、子供向け・ヘルスケアといったジャンルでは優しい色遣いを心掛けたりしてみると、気遣いの伝わるサイトになるかもしれません。
誰に向けてどのような目的のサイトを作るかにより配色の設定は一概に何が良い悪いは無く多様ですが、ケースバイケースで最善のご提案ができればと思います。

 


 
参考:「ダークモード」は、本当に“目に優しい”のか? 5つの観点から科学的に検証した結果 | wired
文字や背景にピュアブラックを使ってはいけない理由 | UX MILK
配色のバリアフリー | 伝わるデザイン

WORKS制作実績