読みやすい文字色と背景色

紙媒体に比べるとモニター画面で文字を読むと目が疲れるということが大なり小なり起こります。そこで、テキストと背景色の明度の差を上手く調節して文字を読みやすくさせましょう。

テキストを読みやすくするためには、背景色と文字色のコントラストを付けすぎないようにするのがポイントです。例えば背景色が白（#fff）の場合文字色は（#333）と限りなく黒に近いグレーを使いましょう。逆に文字色を完全な黒（#000）に設定したい場合は、背景色に若干の色（#fbfbfbなど）を加えて上げると丁度良くなります。

このように少しでも目の疲れが軽減できるように心がけましょう。

文字の色を変更してみる

CSSの初期設定でサイト全体の文字色を設定しましたが、ここでは部分的に色を変えてみましょう。

見出しの文字色を変えてみます。

h1 {
      color: #f00;
 }

h2 {
      color: #00f;
}

これでh1タグでマークアップされた文字色は赤、h2タグでマークアップされた文字色は青に変わります。