web-dev-qa-db-ja.com

読みやすくするための基本的な配色

読みやすさを提供するWebサイトの配色に関する推奨事項はありますか

例えば.

body text color (body)
main heading color (h1)
sub heading color(h2, h3 etc)
background color
border color
line height
font type 
margin
padding

等？

colorreadabilitycsscolor-schemetypography
1
Ryan

特別な視覚的および/または認知的要件を持つユーザーを検討したい場合、それは非常に複雑になり、単一の答えはありません。 W3C Web Accessibility InitiativeのWebコンテンツオーサリングガイドライン（WCAG）は 良い出発点 を提供します。それはおそらく完全に議論の余地はありませんが、Webアクセシビリティに関する最も徹底的に調査された単一のリソースです。

すべてのユーザーにとって最も重要な考慮事項は、コントラストとテキストサイズです。テキストと背景のコントラスト（輝度比）は、少なくとも4.5：1（ 例 ）にすることをお勧めします。テキストのサイズは、ユーザーのデフォルト以上でなければなりません。

淡い黄色の背景に黒いテキスト が読みやすいと感じる人もいます。他の人は（例えば、ブドウ膜欠損症のために）暗闇の光のスキームをまったく読み取ることができず、黒地に白のテキストが必要になります。大きなテキストは常に読みやすくなりますが、表示できるテキストの量が減るため、ユーザーの視力が低下する可能性があります。

つまり、1つのデザインですべての人を満足させることはできません。このため、Webページに対する一般的なアドバイスは、ユーザーのデフォルトをできるだけ尊重することです。したがって、1人のユーザーが茶色の背景に40ポイントの緑色のテキストを必要とする場合、自分で選択できます。

実際には、誰もが本当にアクセスできるWebサイトはほとんどありません。実装するのは大変な作業であり、維持する作業はさらに多く、場合によっては、個々のユーザーと協力して問題を解決する必要があります。ただし、さまざまなユーザーに注意する価値があり、少なくとも最も一般的な問題は回避する必要があります。

  • 複雑または低コントラストの背景を使用しないでください
  • 小さなテキストを使用しないでください（12ptに相当するもの未満）
  • 画像を使用してテキストを表示しない
  • 何かが少し読みにくいと思われる場合は、おそらく不可能です。

また、列、メニュー、サイドバー、広告などにより、テキストが読みにくくなる場合があります。個人的には、本文の周囲に少なくとも1インチの空白が必要です。

7
bobtato

いくつかの経験則：

  • 少なくとも2つのテーマ -明るい場所で暗いと 暗い場所で明るい を提供することをお勧めします。ライトオンダークの場合は、コントラストが高すぎないことを確認します（たとえば、黒に白ではなく、黒に灰色を使用します）。

  • 前景の強度と背景の強度のコントラストが常に十分高いことを確認してください（ W3Cガイドライン 、または私の 詳細な説明はこちら を参照）。

  • ユーザーを前景から注意散漫にしないように、背景はできるだけ滑らかにして、できるだけ色を変えてください。

  • 余白に背景とは異なる色を使用する場合は、背景と余白の間のコントラストの差を大きくしないでください。

  • 段落間にスペースを空け、長い段落は避けます。

  • 本文とその他の大きな文字以外のテキストには クリーンフォント （CalibriやArialなど）を使用します。

  • HTMLの要素の順序が、画面を見ることができない人（スクリーンリーダーを使用するユーザー向け）にとって意味のあるものであることを確認してください。

  • テキストの代わりに画像を使用しないでください（スクリーンリーダーを使用している場合）。

  • 画像のプロバイダーALTテキスト（スクリーンリーダーを使用するユーザー向け）。

1
Danny Varod

多くの人がこのアイデアをあざけるかもしれませんが、ガイドとして Twitter bootstrap を見てください。多くの時間とリソースがそのプロジェクトに投入されて、複数のデバイス間でデフォルトを賢く読みやすくしました。

1
Joshua Moore

美しさや醜さを気にしない場合は、Windowsハイコントラストの配色を模倣してみてください。

0
sergiol