web-dev-qa-db-ja.com

白い背景に黒いテキストを使用することに問題はありますか?

背景が白のときに、多くのWebサイトが#000000黒以外のテキスト色を使用するのはなぜですか?

たとえば、このテキストは濃い灰色で表示されます。

.post-text {
   color: #333;
}

そのトピックについていくつかの研究が行われましたか?

87

白地に黒などの高コントラストは、目の疲れを引き起こす可能性があります。また、それが失読症の人に特に悪いという証拠もあります。詳細については、記事 X Movement および The Bristol Dyslexia Centre を参照してください。

WCAGが詳細を提供 許容可能な色のコントラストについて。ただし、上限は明記しないでください。個人的には、アッパーコントラスト警告を提供する別のアルゴリズムを使用するのが好きです。詳細については、Spider Traxの次の記事を参照してください。 "W3Cはそのコントラストを間違っていますか?"

トピックから少し外れていますが、チェックアウト Contrast-A は、アクセス可能な配色を選択するためにDas Planktonが作成した優れたツールです。

94
Sheff

オフの黒色(#333、#222、#2a2a2a、#444)は、Webタイポグラフィでの印刷物のコントラストをシミュレートします。また、Shefが既に前述したように、純粋な白や純粋な黒よりも読みやすさを向上させることができます。

15
rohicks

これに関する興味深い部分は次のとおりです。 設計のヒント:黒を使用しない

研究ではありませんが、面白いと思いました。考えは、現実の世界ではreally黒ではないreally白とそれ以前は問題ではなかったが、今ではディスプレイのコントラストが非常に高くなっているため、白地に真っ黒なだけでは十分ではありません。

12
radex

黒いテキストは問題ではありません。眩しい白背景です。その背景のまぶしさが目の疲れの原因です。灰色のテキストは、ユーザーが読みづらくなりがちなため、さらに悪化します。そのため、灰色のテキストは多くの場合、黒のテキストよりも読み取りに時間がかかります。実際、多くの人は黒いテキストのページ全体を「見て」すぐにメッセージの感覚を得ることができます-灰色のテキストでそのような迅速なスキャンを達成することはほとんど不可能です。この点で、フォントとサイズは重要ですが、黒を白にした方が見やすくなります。クラシックWindowsデスクトップ(ミッドブルー/グレーに白)は非常に読みやすいです。

関連する問題として、「フラット」デザインへの傾向により、ページ全体が白くなっています。グレアを除いて、クリック可能な領域はパッシブ領域と区別できなくなります。それはどのように使いやすさを向上させますか?何が問題になっていますか:-メニュー/リンク/対照的なパネルにあるコンテンツ? -「ボタン」には、シェード、グラデーション、またはベベルがありますか? -プリミティブでモノトーンではなく、アイコンがマルチカラーでテクスチャーのままですか?

8
Tarian

非常に高いコントラストを使用することによって失読症の読者には問題がありますが、それは大幅に激化し、神話の要点にまで広がっています(この seminal report を参照)。ページ」と「薄い背景に暗いテキストを使用する」)。人気のブログによって広められた白い背景に過度に薄い灰色のテキストを使用する悪用の傾向もあり、主にデザイナーがかなりの効果を達成しようとしているが、読みやすさを損なっています。

多くの学術論文*は、高コントラストのテキストは低コントラストよりも速く読めることを示しています。 W3C Webアクセシビリティガイドラインは、最小コントラストの式を提供します( [〜#〜] aert [〜#〜] を参照)。意見のあるウェブサイト Contrast Rebelion は、テキストの読みやすさに関する学術研究記事へのリンクのコレクション、および白い背景の薄い灰色を避けるための理論的根拠を提供します。

*カップルを投稿しようとしましたが、このサイトの評判システムでは2つを超えるリンクを投稿できません。実際の研究の出発点として、ContrastRebelionサイトのリンクにアクセスしてください(私はこのサイトにまったく関わりません)。

5
TuringTest

白い背景に黒のテキストを使用すると、画面のコントラストがはっきりします。画面を見やすくするために、明るさを変更してF.Luxというアプリに申し込むことができます。これは、コンピュータの色を時刻によって自動的に変更し、目に眩しさを感じさせないフリーウェアです。

実際には色はポイントではありません、それを見つめる時間は重要です。そして、モニターとコンピューター画面の最も危険な部分は青い光です。それはあなたの眼を簡単に傷つけ、目の疲れや他の問題を引き起こす可能性があります。詳細を知る 人間の健康に伴う青色光の危険性 は、目の保護を強化するために非常に重要です。

4
Daphne Yang

私は失読症で、白地にグレー、グレー地にグレーの問題があります。白地に黒、またはライトグレーに黒は問題ありません。すべての失読症の人が同じであるとは限りません。また、すべての人が私たちが最近私たちに押しつけてきた途方もなく悪いコントラストでウェブサイトを読むことができるわけではありません。ユーザーのウェブサイトやコンピューターソフトウェアの人たちと話してみてください。

3
Rex Kinder

混乱を避け、質問が今日でも有効であることを確認するには:

Firefox ReaderやSafari Reader(デスクトップとiPhone)のようなツールだけでなく、m.Twitter.com、facebook、Medium(Webおよび(Android-)App)、Apple.com、Googleなどの主要なWebプラットフォームも最近TechCrunchを再起動しました。このWebサイトでは、今日(2018年3月)の時点で、白い背景に「ほぼ黒」のテキストが実際に使用されています—技術的な意味で、質問は次のとおりです:本当に灰色ではないが、100%濃い黒でもない:rgba(0 、0、0.84)、#111111、#14171a、または#333333

ただし、#ffffffから#000000までの完全なコントラストを使用するものもあります。 Amazon Kindle(Android)またはwww.w3.org。少なくともモバイル画面は通常、とにかく淡色表示されています。

2

私は高齢者ですが、まだ通常の生活の中で活躍しています。私の怒りは、カスタマイズに最も適しているが実用性ではないテキスト、色、背景を選択するオプションを提供する製品/サービスに対する認識の欠如に向けられています。

マイクロソフトとブラウザのコレクションは、一般の人々と調和していません。 MSは、「Windows」とビジュアル製品に幅広いビジュアルソリューションを提供しています。しかし、1つの重要な要素は、ユーザーにとってのニュース/メディアテキストの読みやすさです。 MSとブラウザグループが、個人のニーズをより厳密に満たすテキストと色のオプションの選択を提供することを望んでいます。私の個人的な欲求不満は出版の不気味な側面に引き継がれます。オレンジ色の薄い日焼けの食品準備のお菓子の説明を読んでみてください。またはライトグレーに白。視覚効果は良いようですが、実用性はゼロです。個人的には、自分のライフスタイルやニーズに合ったアイテムを購入する傾向があります。このコンピューターと他の電子機器をあきらめたいです。プロバイダーのひたむきな愚かさに基づいて、そのオプションはすぐに現実になるかもしれません。私はab; eになりたいのですが、背景、テキスト、色(黒)を選択して、meto easyがコンピュータ画面のテキストを無理なく読むことができるようにします。

1
John

いいえ、白い背景の黒いテキストには問題はありません。それは何十年もの間標準となっています。このため、大多数のユーザーに問題が発生する可能性はほとんどありません。グレーのテキストを使用する場合は、コントラストの低い状況ではテキストを読むことができない場合が多いことに注意してください。モバイルデバイス上または視覚障害者の場合。

非常にありそうな理由は、灰色のテキストが視覚的に魅力的であることです。多くの場合、協力的な設計で見られ、生産的な環境ではほとんど使用されません。

Mozillaのサポートサイトでは、Reader Viewの機能の1つはコントラストを追加することであると述べています。リーダービューの色の選択は、提供する必要がある最小コントラストの広く受け入れられているリファレンスです。

1
STOPIT

画面上の暗いRGB以外の色が目のXYZ色に変換され、次に脳によって色相-彩度-明度の色に類似したものに変換されると、RGB値の小さな変化がXYZの小さな変化となり、小さな変化が生じます。色相と彩度(まとめて彩度と呼びます)。暗い色がHSLに変換されると、RGB値の同じ絶対サイズの変更により、XYZの変更が大きくなり、彩度の変更が大きくなります。特定の色相/彩度の暗い領域が同じ色相/彩度の明るい領域の隣にある場合、境界線は一般にわずかにぼやけます(眼球はよく焦点が合っているが完全ではないため)が、境界線上のすべての領域は同じである必要があります彩度。メモリ内のRGBカラーを眼球内のXYZカラーに変換するプロセスに非線形性がある場合でも、結果として生じるクロマの不均一性はわずかです。

ただし、色が暗すぎる場合、RGB値のわずかな変化によって彩度が大きく変化する可能性があります。コンピューターのRGBカラーを目のXYZカラーに変換するプロセスに非線形性がある場合、知覚される彩度の変動は非常に大きくなる可能性があります。 (0,0,0)のRGB値が(0.0001、0、0)であるかのように知覚されると、赤みがかって表示されます。 (0,0,0.0001)として認識されると、青みがかって表示されます。背景色(96,128,128)と前景色(3,4,4)を使用すると、前景と背景の彩度は同じになります。代わりに前景色(0,0,0)を使用すると、テキストの一部の知覚彩度は背景の彩度と異なるだけでなく、一定でなく、不均一になる可能性があります。そのような暗いオブジェクトの彩度は意味がありませんが、それは意味のない彩度の変化が邪魔にならないことを意味しません。

1
supercat

最近、ソーシャルコラボレーションプラットフォームのUXの構築に携わっており、アクセシビリティについても真剣に取り組んでいました。アクセシビリティガイドラインへの準拠の一環として、情報を伝達する主要コンポーネントの色のコントラストを確認することが主要な作業でした。 WCAG 1.4( http://www.w3.org/TR/2005/WD-WCAG20-20050630/#visual-audio-contrast )では、色のコントラストが特定のレベル内にある必要があります。 sheff で答えを完全に2番目に

1
mysticpixels

私は上記の貢献で100%です。 |このすべての灰色のテキストは、画面や紙のドキュメント、本、投薬指示などで読むのを非常に困難にします。また、テキストはますます悪化し、灰色になります。見た目の美しさやかっこいいテキストに見えるまで、コントラストの必要性は完全に失われていますが、実用的な目的はありません。それは読書の評判と印刷の価値を高め、ビデオ、ウェブセミナー、画像メディアを通じて広まるジャーナリズムと分析へと徐々に移行していくと思います。目的に応じて使用できるため、レポートや分析の詳細や洗練された内容を含めることはできません。印刷物や書面の情報コンテンツを重視する方は、印刷物の視認性を高めるためにキャンペーンを実施する必要があります。

1
David Lamb