ハイコントラスト環境への配慮

弱視の方がパソコンを利用される際に通常の配色では眩しい場合など、画面の配色をハイコントラスト（白黒反転）に設定して利用されることが多いのですが、Windows でハイコントラストに設定すると、背景色や背景画像は表示されなくなります。そのため、通常の配色では見えない配慮が必要になる場合があります。（ちなみに Mac の機能にあるカラー反転は、背景を含めてすべての色が反対色になります。）

まず、配慮以前の問題なのですが、“オフレフト” や “画像置換” などと呼ばれるコーディング手法は致命的な問題が発生します。これは、HTML 上のテキストを text-indent: -9999px などとして画面の外に飛ばし、代わりに画像テキストを背景として配置するというもので、ナビゲーションやタイトル部分など、今でも多くの Web サイトで取り入れられています。

しかし、これをハイコントラスト設定で見ると、当然背景として配置した画像は表示されませんので、その部分は何も見えない真っ黒な空間になってしまいます。

テキスト情報なので SEO にも有利で、スクリーンリーダーでも読み上げられるからアクセシビリティも向上するなどという誤った考え方が広まったこともありますが、これは全くの論外で、装飾目的でない意味のある画像はきちんと代替テキストを伴った img 要素を使って HTML に記述すべきです。

次に、背景を透過処理したロゴなどの画像テキストです。四角形に切り出した画像テキストの背景が塗り潰されている場合は問題ありませんが、最近は背景を CSS3 を使ってグラデーションにしたり、レスポンシブ Web デザインの採用で背景が変化するなどの対応から、背景を透過させた画像テキストを使うことも多くなってきていると思います。

その画像テキストが黒や青などの濃い色である場合、ハイコントラストに設定すると背景の黒に埋もれてしまい、判別がつき難くなってしまいます。

画像テキストの周囲を通常時の背景色で縁取りするとか、光彩処理を施すなどして背景が黒い場合でも判別できるような画像を用意して配置する必要があります。

そして、これは配慮されている Web サイトはまだ少ないのですが、背景によってコンテンツの領域を区別している場合です。通常の配色では背景色や背景画像によって囲まれているように見えても、ハイコントラストに設定すると背景が消え、その境界が見えなくなります。

このような場合、背景色あるいはその周囲の背景と同じ色で 1px のボーダーを付けるなどの配慮を施しておけば、通常の配色では見えない線がハイコントラストで現れ、コンテンツの境界を区別することが可能になります。

一方、よく自治体のサイトなどで、文字の拡大ボタンと一緒に配色を白黒に変更するボタンが用意されていることがありまが、白黒反転の環境を必要とするユーザーは元から OS レベルでハイコントラストの設定をしており、その環境でメニューなどの必要な画像が消えたり、画像テキストが読み難くなったのでは意味がありません。

そのような機能を提供する以前に、OS やブラウザの機能で配色やフォントサイズを変更したときに、問題なく閲覧できるようにすることが大切だと考えます。