良い配色�@
○背景と文字の明度差が大きい
白背景なら字は■black#000000〜■gray#808080が読みやすいです。

○横幅狭め、枠付き
スマホで横スクロールバーが出てくると読みづらいです。横幅は20字前後が読みやすいとされています。枠があるとパソコンのような横長なディスプレイでも視線移動がスムーズです。

良い配色�A
○背景と文字の明度差が大きい
黒背景なら字は□white#ffffff〜■silver#c0c0c0が読みやすいです。

悪くない配色○画像と文字を重ねない
この画像の場合、緑や赤と文字が重なると読みづらいです。パッと見て無地に見える画像以外は文字に重ねないほうが良いです。

！広告隠しに注意
多くのレンタルスペースが文字広告が見づらくなる行為を禁止しています。画像は文字広告に重ならないようにdiv要素で配置するなど工夫してください。

悪い配色�@
×背景と文字のコントラストが小さい
読むのに時間がかかってしまい、無駄な労力を使うことになります。

×枠が目立ちすぎ
情報が何もない所に視線が誘導されるのは良い配色とは言えません。

悪い配色�A
×赤い背景
赤は神経を興奮させる作用があると言われ、長時間見ていると疲れます。

×赤と緑の組み合わせ
同じような明度の補色(赤と緑、青と橙、黄色と紫など)の組み合わせは読みづらいです。また、白黒でプリントアウトした時、更に字が読めなくなります。

×派手な背景色
雪の白さや光の眩しさといった微妙な色合いをイメージしづらくなります。