【注意】 背景のあるページについて

しばしば、背景のあるページに出くわします。
各言う当サイトも、背景付きのページです。

そのようなわけで、コチラのページでは、背景つきのページについての注意点について書きたいと思います。


【見えづらい】 背景と文字

背景も文字も明度や色相を持っているものです。
明度とは明るさのことです。色相とは色味のことです。

明度と色味が大きくかけ離れていることが、見えやすさの条件となります。
ところが、この明度と明暗が接近してしまう可能性が高くなるのが、背景つきのページなのです。

例えば、↓の様な画像があったとします。
それに、文字を加えてみると・・・


うちの子は世界一美人だと思っています。
写真写りもよいし、何と言っても器量よし。
・・・だと、飼い主は親○かで思っております。
(でも、どう考えても親○かやのよネ〜(´д`)ハガー)

鼻や口の部分が黒いので、その部分の文字が同化してしまって見づらくなってしまっています。
(緑の草の部分も白(R ff G ff B ff)に比べて明度が低いので、読みづらくなっております)そこで、今度は鼻と口の部分に合わせて色を白くしてみます。
すると・・・


うちの子は世界一美人だと思っています。
写真写りもよいし、何と言っても器量よし。
・・・だと、飼い主は親○かで思っております。(でも、どう考えても親○かやのよネ〜(´д`)ハガー)

今度は、草などの明るい部分が同化してしまって見えづらくなってしまいます。
そのようなわけで、もし、背景つきの画像を文字に重ねるのであれば、↓のような画像にされた方が宜しいかと思います。

うちの子は世界一美人だと思っています。
写真写りもよいし、何と言っても器量よし。
・・・だと、飼い主は親○かで思っております。
(でも、どう考えても親○かやのよネ〜(´д`)ハガー)

このような感じでありますと、背景と文字の明度と色相に差を持たせてあげれますし、背景画像全体の明暗や色相の差が少ないですので、文字を分かりやすくすることが出来るのです。

ところで、時折↓のような文字と背景のページを見かけますが、これはとても見づらいです。
何故なら、文字と色相の差が少ないからです。
ですので、このような場合は、文字をドラッグして囲んだ状態で文字を黒白反転させて読むようにしています。そうすると、文字を読みやすくなる場合があります。

うちの子は世界一美人だと思っています。
写真写りもよいし、何と言っても器量よし。
・・・だと、飼い主は親○かで思っております。
(でも、どう考えても親○かやのよネ〜(´д`)ハガー)

ちなみに、背景に絵柄が表示されてはいるものの、<TABLE>や<DIV>を使用したりして、文字を表示する部分を白くすることで、文字だけを読みやすくすることも可能ですし、文字のレイアウト変えてみたり、色々と工夫してみて面白くて見やすそうなページ構成にしてみてください。

うちの子は世界一美人だと思っています。
写真写りもよいし、何と言っても器量よし。
・・・だと、飼い主は親○かで思っております。
(でも、どう考えても親○かやのよネ〜(´д`)ハガー)

広告