web-dev-qa-db-ja.com

黒の背景に白のテキスト

黒い背景に白いテキストを使用しない理由はありますか?

27
Chandra Patni

これが それに関する記事 です。記事の引用を引用するには:

ただし、ほとんどの研究では、明るい背景の暗い文字は暗い背景の明るい文字よりも優れていることが示されています(リフレッシュレートがかなり高い場合)。たとえば、バウアーとカヴォニウス(1980)は、明るい背景に暗い文字を使ってテキストを読んだ場合、参加者はテキストを26%正確に読むことがわかった。

そして

乱視を持つ人々(人口の約50%)は、白の黒のテキストより黒の白のテキストを読むのが難しいと感じています。これの一部は、光のレベルに関係しています。明るいディスプレイ(白い背景)では、アイリスがもう少し閉じ、「変形した」レンズの効果が減少します。暗いディスプレイ(黒の背景)では、アイリスが開いてより多くの光を受け取り、レンズの変形により、目にぼやけた焦点が作成されます。

doが暗いテーマを使用したい場合は、他のユーザーがどのように使用するかを確認してください。

Windowsコンソール

Windows Console

  • 黒地にグレー
  • 大きなフォント
  • 大胆な
  • セミセリフ

エクスプレッションブレンド

Expression Blend

  • 灰色の卵殻
  • サンセリフ
  • ClearType(LCDでズームアウトすると、テキストは黄白色に見えますが、青には気づきません)
32
Robert Fraser

デザイン要素のティモシーサマラ:グラフィックスタイルマニュアル は、黒と白の色の解釈を提供します。サマラは、黒は「可視スペクトルで最も強い[...]最強の色」であると語っています。彼はさらにそれを支配的であり、何もない感覚の典型とも呼んでいます。一方、白色は「すべて」の色であり、その全体性と明瞭さの感覚です。

支配的な暗い値のカラー領域(黒いフィールド)は、脳内に配置された明るい値のカラーを拡大します。その効果は、明るい値のオブジェクトは、非常に暗い値の領域のボイドににじむ傾向があるということです。実際には、白い文字は暗い背景でより重く見えます。

文字を読みやすくするためには、文字間に一定のスペースが必要です。文字はグループ化されたコレクションのように(そしてWordのように)見えるように十分に接近している必要がありますが、文字間の境界が不明瞭にならないように(およびグループを見えるように)接近させる必要はありません。ブロブのように)。文字が太く見えると、それらの間の見かけ上の間隔が減少し、単語は明るい白い塊になりがちです。フォントの表示が変更されない限り、これは黒地に白を読みにくくするため、望ましくありません。

ただし、インターフェイスのスタイルシート(またはテキストの表示方法/内容を定義するために使用されるもの)を少し追加するだけで、白地に白を実現できます。

  • まず、「細い」または「軽い」(「狭い」ではない)フォントまたはfont-weightは、レターボディのブリードの効果を減らします。または、文字のサイズを大きくすると、文字のグリフに十分な表面積が与えられ、黒い背景と視覚的に優位に戦うことができます。
  • 第2に、文字の間隔を広げると(フォントサイズが小さいほど大きくなる)、グリフは文字のように見えるために必要な余白が少し増えます。これらの2つの効果により、黒の背景に白の標準フォントの使いやすさの低下を軽減し、上記の代替色の組み合わせを使用できるようになります。
10
Matt

それは主にコントラストと媒体についてです。コントラストが高すぎると、暗い背景で光る文字が目を疲れさせる可能性があります。

これは、多くの考えを持つ主題に関する 興味深い会話 です。

8
Kostya

黒の背景に白のテキストは非常に実用的です。特に、周囲の光が薄暗いかゼロであり、テキストを表示するデバイスがかなりの量の光を放出する場合(iPadが完全な明るさの場合など)。

5
Max Steenbergen

眼精疲労。しかし、特定の状況ではすべてが適切です。

4
Glen Lipka

日光の多い部屋にいるとき、黒い背景に白いテキストを読むのは非常に難しい場合があります。ノートパソコンをお持ちで、画面の真正面に座っていない場合も同じ問題です。暗いテーマも素晴らしいです。

3
neoneye

Blackle をご覧になることをお勧めします。
Googleを逆さにしたもの-白地に黒。
余分にクリックしてサイトにアクセスし、通常のGoogleと体験を比較してください。
(彼らは 省エネルギー にそれを行いますが、少なくとも私の意見では、ユーザーエクスペリエンスは確実に低下します)

2
Dan Barak

いくつかのポイント:

  • 目の虹彩は、目に入る光の量に応じて調整されます。ほとんどの領域が黒で、非常に明るい光がある場合、目が疲れる可能性があります。したがって、画面の強度レベルが高い場合黒に灰色白地に黒よりも推奨されますが、画面の輝度レベルを調整できるため、これは問題にはなりません。

  • マットが引用したように、私たちが見る画像の認識では、明るい領域は暗い領域に拡大します。したがって、テキストが背景より明るい場合、通常のテキストはより大胆に見えます。テキストが最初に太字である場合、白地に黒の結果が太すぎるように見えるかもしれませんが、通常のテキストの場合、テキストが「目立つ」ように見え、読みやすくなります。
    私が間違っていなければ、ほとんどのテキストは太字ではないので、太字のテキストよりも通常のテキストの表示を最適化する方が理にかなっています。

  • 暗い環境で本を読んでいる場合、画面から目を離したり、画面を後ろに向けたりすると、白い背景が目を疲れさせます。

  • あなたが明るい環境で読んでいるなら、 この回答を参照

  • 多くの色/濃淡(たとえば、コードの読み取り/書き込み)でフォーマットされたテキストを読んだり、画像を操作したりしている場合、黒い背景の暗い色は、白い背景の明るい色よりも簡単に知覚されます(コントラストについては 式を参照)ここ )。

  • 白い背景が望ましいというのは一般的な(誤解)考えですが、現代の画面で実際に作業を試みたことがあり、適切な前景色で暗い背景が好ましいと私は知っています。

  • フレーザーが指摘したように、引用された研究は時代遅れであり、十分な要因が測定されていません(たとえば、画面の前の期間、画面のタイプ、部屋の照明、テキストの色合いと色の多様性)。

  • Cleartypeは、最新のLCDで使用されます(新しい「LED」画面も実際にはLCDであり、蛍光灯の代わりにLEDバックライトを備えています)。サブピクセルを使用したアンチエイリアスの方法であり、暗い方とは何の関係もありません。

1
Danny Varod

時々、スタイルは黒の背景に白のフォントを使用することを指示します。必要な場合は、必ずsans serifフォントのみを使用し、できれば細すぎないフォントを使用してください。

0
Hisham

本当に答えではありませんが:

それでは、黒の背景にオフホワイトを使用する方が良いでしょうか?

最近の最も注目すべきケースは、Microsoft Expression Blendです。

0
James Ludlow

インドの標準の車両のナンバープレートは、明るいスタイルで暗い色を採用しているため、遠くからでも読みやすくなっています。したがって、明るいバックグラウンドの画面で黒のフォントを使用することを検討する必要があります。

0
Kit Grose