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



解説

色盲、色弱のユーザーや、モノクロディスプレイ等の色を理解できない(色を理解しづらい環境)や、音声ブラウザなどでは、色による情報の識別が困難あるいは全くできません。
色によって情報を識別させる場合は、色に加えて「形」や「文字情報」等でも情報が伝わるようデザインします。
ブラウザの設定によっても色は変わる可能性があることに注意してください。


実例

  • 色を使って情報の判別をさせる場合は、形や線の太さ、文字情報等を併用して情報を伝えるようにします。
  • グラフや図表の凡例やカレンダー等の表組では特に注意してください。

悪い例:

線の色だけで情報の違いを表現しています。グレースケールでは判別が困難です。

悪い例の画面イメージ。線の色だけで情報の違いを表現した折れ線グラフをグレースケールで表示すると、情報が識別できません。

良い例:

引出し線で情報を示し、色がわからなくても情報が伝わるようにしています。

良い例の画面イメージ。折れ線グラフの線に引出し線と凡例をつけることで、グレースケールでも情報が得られるようになっています。

悪い例:

セルの色だけで情報の違いを表現しています。

悪い例の画面イメージ。営業日と土曜・日曜の違いを表のセルの色だけで表現しています。

当行における特記事項:

為替や株価のグラフ(ラインと凡例)、カレンダーの色分け表示、地図における線等では特に注意すること。



関連するJISの項目

5.5 a,c (必須)




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

このページの先頭へ戻る