15
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

実際にWebの閲覧で眼を悪くした人がおすすめするWebの色配色

Last updated at Posted at 2022-05-20

MSXパソコンで color 15,4,7 ではじめて
そのあと、白文字、黒背景のMS-DOSとかを比較的長期間体感して、今の時代に目を悪くした人が、色の提案をしています。

ライトモード

背景に使用すべき色:#ccc~#eee
通常の文字:#222
目立たせる色:#000 (過剰利用はしないこと)

ダークモード

背景に使用すべき色:#222~#333
通常の文字:#ddd~#eee
目立たせる色:#fff (過剰利用はしないこと)

この配色の考え方

普段からディスプレイで白色は多く見る為に、白色は全体的になるだけ抑えており、ちょっとでもグレーに近づけておきます
明るい色と暗いの差異を減らし、かつ、明確にしておく

これで対処しておけばいいや、っていう悪い例をあげます。
この配色は、かえってピュアブラックとかを使ったほうのが見やすくなるし、色の差異が逆に少なくなり、目の疲労が更に加速します

color: #ccc;
background: #444;

color: #444;
background: #eee;

かつ、白色の白さを減らせば、特にスマホ等でディスプレイの消費電力を少し減らすことができる

背景の黒は極度に明るくしすぎない。明るくしすぎることにより外で太陽光直下の環境で全体的に見にくくなる

手間に惜しまないのであれば、別途ハイコンストラクト色もあるとよい。必要とする方もいらっしゃいます。

この記事を書いてるエディタ画面

image.png

このぐらいの配色で、目の苦痛がなくなっています。

長年利用しているファイラーの画面

image.png

フォントは変わっているものの、デフォルト色です。
MS-DOS由来の、本来のやさしい画面が、目の癒しになっています。

今のTeraTermの色

image.png

ファイラー等と違う系列の色として、TeraTermのアイコン、黄色に近いダーク色にしてみています。

コマンドプロンプト(旧MS-DOSプロンプト)

image.png

あまり大して考えられていない色と感じるようですが、ずっと見てても悪影響をしない、かなり目に優しい色です。

おまけ 作ってみたお問い合わせフォーム

image.png

qiitaの画面比べると、明らかにグレーになっていることがわかると思いますが、
フォーカスした時にピュアホワイト、ブラックにすると、今、どこにいるのかわかりやすくなるのかもしれません。

image.png

もちろんですが、ダークモードも存在します。

※実際には透過色を用いたbackground背景画像があるのですが、そこはあえてはぶいています

多くの方のストックありがとうございます。

実際に起きる症状 qiita

もし、仮にガチでqiitaのエディタ画面を見ている場合、
左の文字が細い、ブラウザで拡大したい、と少なくとも感じられます

実際に起きる症状 不満買取センター

メニューの文字が薄すぎて読めないよ(これは大きくなってるので読めますが、実サイズとなると、ほぼ読めません)

image.png

実際に起きる症状 テキストエディタ(秀丸)のピュアホワイト、ピュアブラック

まじ、目がいたい。。。

実際に起きる症状 Windows 11(白色系のテーマ)

image.png

眼がいたくて、何やればよいのかわからなくなる

実際に起きる症状 テレ朝ニュース

TOPページは別に問題ありませんが、記事の本文は何をかいてあるのか理解できず、理解するために目を疲れさせてしまう。

参考

現時点でのディスプレイの明るさ(ノートPC)は以下の通りです

image.png

15
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?