テキストの背景に画像を使うときは注意!

昼食どきには 500mlパックのリプ○ンが欠かせない yuka です。
抹茶ミルクが出た時には、連日そればっか飲んでいた抹茶好きでもあります:oops:

それはさておき……。

ホームページを作っていると、文字の背景に色をつけたりして装飾することがありますよね。
そういうときって、背景色と文字色のコントラストに気を付けると思います。
コントラストが不十分だと文字が読みづらいし、隠しテキストだと判断されてしまうかもしれません。
でも、CSS などで背景に画像を使ったときはどうでしょう:kaomoji4:
背景色も併せて設定していれば良いのですが、そうでないと困ったことに:shock:

濃い色の画像を背景に設定して、文字色(color)を薄い色にした場合。
コントラストがはっきりして読みやすいですが、仮にこの画像が表示されなかったらどうでしょうか。

分かりやすいように薄く色をつけています。
画像が読みこまれるのが遅れて、こんな状態になっていたら閲覧者は読みづらくてしょうがないですね。
背景色(background-color)を指定していない状態で、白い背景に白い文字が書かれている事に。
まさに隠しテキスト状態です:kaomoji3:
ちなみにこの状態でバリデーションすると、「コントラスト足りてないよ!」 って警告が出ます。
そこで、背景画像(background-image)と併せて、背景色(background-color)も指定してあげます。

どうでしょうか。
画像が表示されていなくてもシッカリ読めますね。
背景画像と背景色はセットで指定しておくことをお勧めします:hoshi1:

「検索エンジンは画像も判断出来るんだから、大丈夫でしょ。」って意見も耳にしますが、
判断出来るといっても完璧じゃないし、やっぱりこういう所にも気を付けたいですね。

トラックバックURL

コメントを残す

メールアドレスが公開されることはありません。