img（画像）には文字色を指定しよう（そう、文字の色を）

なぜ画像なのに「文字の色」を指定しなければいけないのでしょうか。それは、画像が表示されない状態では画像のaltテキストが表示されるため、その状態での表示をおかしくない状態にするためです。

念のために説明しておくと、altテキストとは、imgタグで画像の簡単な説明をテキスト記述するものです。HTMLの用語では「alt属性」と呼ばれ、img要素には必ず記述することとされています。altテキストはふつうにブラウザでページを見ているときには関係ありませんが、画像を解釈できない検索エンジンや視覚障害者が使うテキスト読み上げブラウザにとっては、そこに何が示されているのかを理解するのに重要です。

しかし、alt属性が表示されるシチュエーションはほかにもあります。iPhoneやイー・モバイルなどを使ってモバイル環境からウェブにアクセスする人にもaltテキストは関係があります。モバイル環境では通信速度が（オフィスなどに比べると）遅いため、画像の表示をオフにしている場合があるのです。そうすると、画像のあるべき場所にはaltテキストが表示されます。また、画像をオフにしていなくても、通信が遅くて画像が読み込まれるまで時間がかかる場合は、altテキストが表示された状態になります。

そういった状況で、多少なりともaltテキストを読んで理解してもらうためにも、img要素の文字色を設定しておくべきなのです。特に濃い背景に画像だけを置いている場所などでは、altテキストが標準の文字色で表示されると読みづらくなる場合もあるでしょうから、しっかりと文字色を指定しておきましょう（標準では画像のaltテキストは親要素の文字色が使われます）。

画像のaltテキストが表示された際の色を設定するには、CSSで次のようにします。

-----------------------------------------------
img{
/* 黒背景だとして文字を白色にする場合 */
color: #ffffff;
}
-----------------------------------------------

ほかにも、ロゴ画像のaltテキストなら、ロゴに近いフォントや太字にして、背景色にもロゴの色と同様の色を指定しておくといいでしょう。

-----------------------------------------------
#logo img{
/* Web担のロゴなら背景ピンクで文字は白、太字で大きく */
background-color: #EC6089;
color: #ffffff;
font-weight: bold;
font-size: 2em;
}
-----------------------------------------------