背景色と前面色の関係

• 色の重要性とその種類について
• 色が与える心理的イメージ
• 背景色と文字色の関係
• カラ―コード検索とカラ―ピッカー

ホームページを作る時には、背景の色と前面の色との関係を十分に理解しておかなければいいけません。
例えば、濃い背景に濃い文字色で記述すると、すごく読みにくいページになってしまいます。そこまで極端でなくても背景色と前面色との関係はすごく大切です。

まずは上の表を見てみてください。
背景色を白色と黒色にして、文字色を薄い灰色〜黄色〜茶色〜濃い灰色にして文字の読みやすさを比べてみました。

背景が白色の場合は薄い灰色・黄色のような明るい色は読みにくく、茶色や濃い灰色等の暗めの色ははっきりと読めます。逆に背景が黒色の場合には薄い色が読みやすく、濃い色だと読みにくくなっていますね。

では、次の場合はどうでしょうか？

上の例は、同じ二色の組み合わせで、背景色と文字色とを入れ替えたものです。
どうでしょうか？上の例よりも下の例の方が読みやすいと感じるのではないでしょうか？
このように同じ色の組み合わせでも、背景と文字の色を入れ替えるだけでこれだけ雰囲気が変わってきます。
文章を読ませたい場合は、背景を文字色よりも明るめに設定してあげた方が読み手の目の疲れを少なくさせることができると思います。

背景色の選択時のポイント

背景色は、高彩色の色(原色のような色)を大きな面積で使いすぎると、目がチカチカして見づらいページになってしまいます。高彩度の色を使う時はあくまでアクセントとして使用して、説明文などの長文を載せる場合には使用しない方が無難ではないかな、と思います。