本文へ


IEで背景色を黒に文字色を白に設定した場合

  • 2010年January17日(Sun) 19:11 JST

Webサイトを閲覧する際、背景色が白では眩しくて見難いかたは背景色を黒にして閲覧されています。

Internet Explorer6でツールからインターネットオプションを選びユーザー補助の書式設定で「Webページで指定された色は使用しない」にチェックを入れ、色で背景色を黒にし文字色を白に設定してWebサイトを閲覧されているかたから「このように設定するとサイトによってはボタン等が表示されない場合があり、そのようなサイトが多くなってきている」と教えていただいたので色々と調べてみました。

調べている中で見つけたIE+色指定無視でW3Cのサイトが読めなくなる話を読ませてもらってびっくり!
Web Content Accessibility Guidelines (WCAG) 2.0が、Internet Explorer7でツールからインターネットオプションを選びユーザー補助の書式設定で「Webページで指定された色は使用しない」にチェックを入れ、色で背景色を黒にし文字色を白に設定して閲覧すると肝心な文章が見えない状態になるんです。原因は、IE+色指定無視でW3Cのサイトが読めなくなる話に書いてあるように、CSSでbodyにbackground-image: url(http://www.w3.org/StyleSheets/TR/logo-REC);と指定されているのが原因のようです。解決方法の一つとしてbackground-color: white;の指定を追加すれば文章が表示されるようになります。
ちなみにWindows コントロールパネルのユーザー補助のオプションにある画面の文字と色のコントラストを調節するを選び画面タブのハイコントラストを使うにチェックを入れ設定をクリックし、ハイコントラスト黒の状態で閲覧すると文章がちゃんと表示され情報が得られます。

CSSでbodyに文字色のみ指定してあるサイトに対して「文字色を指定するならちゃんと背景色も指定してくれないと文字が読めない」と書かれているブログを見た事もあり、CSSでbodyに背景色を指定する時には文字色も指定しないといけないという事は知っていましたが、実際に黒の背景色で閲覧されているかたの声を聞かせていただき改めて気を付けなければいけないと思いました。生の声を私にお聞かせくださったかたには心より感謝しております。

皆さんも一度自分が作成したサイトをInternet Explorer7でツールからインターネットオプションを選びユーザー補助の書式設定で「Webページで指定された色は使用しない」にチェックを入れ、色で背景色を黒にし文字色を白に設定し閲覧してちゃんと情報が得られるようになっているかチェックしてみてください。

最後になりましたが、2010年もアクセシビリティを中心に色々と勉強し、学んだ事を形にしていけるよう頑張りたいと思ってますので、よろしくお願いします。