ビジュアルデザインのアクセシビリティ指針
優先度1



解説

色に色を重ねる場合(背景色の前景に色のついた文字を表示する場合等)には、充分な色の差、コントラストの差をつけるようにします。
色盲、色弱のユーザーは、色の組み合せによっては情報を理解できないかもしれません。
背景色と前景色のコントラスト差を確保することにより、グレースケール環境でも情報が理解しやすくなり、モノクロプリンタで印刷した場合でも情報が理解しやすくなります。


実例

  • 背景色と前景色は、色の差、コントラストの差を充分に確保するようにします。
  • 背景色と前景色の色の差、コントラストの差を充分に確保できない場合には、境界線を入れる等の方法で、情報を識別できるようにすることができます。

悪い例:

背景色と前景色の色の差・コントラストの差が不十分です。

悪い例の画像イメージ。緑地に赤い文字が載っています。
元の画像

悪い例の画像イメージをシミュレーションソフトで変換した例。茶色地に茶色の文字が載っており、識別が困難です。
色覚シミュレーションソフトを使った第一色盲のシミュレーション結果

良い例:

背景色と前景色の色の差・コントラストの差が十分か、境界線を入れることで読みやすさを確保しています。

良い例の画像イメージ。青地に黄色い文字が載っています。
色の差・コントラストの差が十分な例

良い例の画像イメージ。緑地に赤い文字が載っていますが、文字は白く縁取られています。
境界線を入れて読みやすさを確保した例

参考:

色覚異常の色の見え方をシミュレーションするソフトを使って色の組み合せをチェックすることができます。



関連するJISの項目

5.5 c (推奨




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

このページの先頭へ戻る