テキストとそのテキストの背景色のコントラストが弱ければそれだけで「見にくいブログ」となってしまいます。

一番簡単に改善出来る事でありますが、一番重要な部分でもあります。コントラストとは？という方の為にコントラストについて説明します。

コントラストとは明暗の対比を表します。黒の背景で一番見やすいテキスト色は白であるように、色と色にメリハリをつけます。「明るさの差」とも言われています。例えば以下のテキスト、どちらが読みやすいでしょうか。

薄緑色で文字を書いています。

青色で文字を書いています。

もちろん、青色テキストの方が断然見やすかったと思います。薄緑色と黄色は明度が近い為、見にくいと感じたと思われます。しかし黄色と青色は、明度の差が広い為、見やすいです。ただし青色テキストはリンクと勘違いされる元なのでテキスト色には相応しくありません。

「読みやすいブログ」にする為にテキストサイズがよく挙げられますがテキスト色にも充分気をつけましょう。

なお、以下に明度の差を広げる事によってどれだけ見やすくなるかの例を９段階であげましたので、参考にして下さい。背景は全て黒で、赤色の明度を高くしていきました。黒の背景と赤の文字は見にくいですが、明度を高くする事でどの程度見にくさを解消できるでしょうか。

レベル１：背景（#000）×テキスト(#000)

レベル１

レベル２：背景（#000）×テキスト(#660000)

レベル２

レベル３：背景（#000）×テキスト(#990000)

レベル３

レベル４：背景（#000）×テキスト(#cc0000)

レベル４

レベル５：背景（#000）×テキスト(#ff0000)赤色

レベル５

レベル６：背景（#000）×テキスト(#ff0033)

レベル６

レベル７：背景（#000）×テキスト(#ff0066)

レベル７

レベル８：背景（#000）×テキスト(#ff0099)

レベル８

レベル９：背景（#000）×テキスト(#ff00ff)

レベル９

このように、記事背景とテキスト色を少しずつ調整していく事で、どの段階で読みやすくなるかが分かります。記事背景色「白」×テキスト色「黒」というベーシックな配色以外の方は、色による読みやすさをもう一度確認してみましょう。

前後の記事

最近の記事

トラックバック

この記事へのトラックバックURL：
http://fc2blogshop.blog13.fc2.com/tb.php/516-d73de267

コメント