スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

前後の記事

最近の記事

管理者にだけ表示を許可する

背景色とテキスト色に御注意

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

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

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

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

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

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

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

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

レベル1:背景(#000)×テキスト(#000)

レベル1

レベル2:背景(#000)×テキスト(#660000)

レベル2

レベル3:背景(#000)×テキスト(#990000)

レベル3

レベル4:背景(#000)×テキスト(#cc0000)

レベル4

レベル5:背景(#000)×テキスト(#ff0000)赤色

レベル5

レベル6:背景(#000)×テキスト(#ff0033)

レベル6

レベル7:背景(#000)×テキスト(#ff0066)

レベル7

レベル8:背景(#000)×テキスト(#ff0099)

レベル8

レベル9:背景(#000)×テキスト(#ff00ff)

レベル9

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

前後の記事

最近の記事

トラックバック

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


コメント

管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。