ページ制作のアクセシビリティ指針
優先度2



解説

CSSを用いて特定の要素内に文字の色や背景色、背景画像を指定する場合に、ブラウザの設定やユーザーが独自に指定した設定との組み合わせによっては、極端に見づらくなったり、場合によっては全く見えなくなる可能性があります。
また、ブラウザからの印刷時に背景を印刷しない設定にしているユーザーへの配慮も必要です。


実例

  • 背景画像(background-image)を指定する時には、背景画像と近い系統色の背景色(background-color)をあわせて指定します。
  • 背景画像、背景色を指定する時は、文字の色(color)もあわせて指定します。
  • 文字を色(color)を指定する時は、背景色(background-color)もあわせて指定します。
  • 背景色と前景色には、充分な色の差、コントラストの差を確保するようにします。
  • 背景を指定する要素内にリンクテキストがある場合は、リンクテキスト色との組み合わせにも注意します。
  • HTML(XHTML)の要素や属性によって色指定を行わず、CSSで指定するようにします。

悪い例:

悪い例の画面イメージ。背景色を指定していますが、リンクテキストの文字色を指定していないため、ユーザーが色に関する指定を変更することによってリンクテキストが読みづらくなっています。HTMLで背景と文字のみ指定し、リンクテキストの色指定を行っていない状態(ユーザーがブラウザの色指定を変更した場合)


HTML: <body bgcolor="#FFFFFF" text="#444444"> 

良い例:

良い例のイメージ。背景色、文字色、リンクテキストの色をすべてCSSで指定しています。制作者側のCSSが適用された場合の表示例を示しています。CSSでリンクテキストを含むすべての色を指定した場合(ユーザーがブラウザの色指定を変更した場合)


CSS: body{background-color:#FFFFFF;color:#333333;}
        a:link{color:#0000CC;}
        a:active{color:#0000CC;}
        a:visited{color:#660066;} 

良い例のイメージ。色に関する指定をすべてCSSで行うことによって、ユーザーが背景を黒に、テキストを白や黄色にしたい場合等にユーザーの設定によって色の指定を上書きすることが可能になっています。色の指定をCSSのみで行っているページで、色の設定をユーザースタイルシートで上書きした場合



関連するJISの項目

5.6 c (推奨)




アクセシビリティガイドライン トップ

このページの先頭へ戻る