Accessibility
Guidelines

1.4.1 色だけで伝えない

色だけで情報や動作を促すような表現はせず、テキストや記号でも伝えるようにする。

具体例

  • 入力フォームの必須項目の表示の良い例
    Good 必須項目には赤色で【必須】と併記している。色以外でも伝えるが、色は直感的にわかりやすくするための補助的な要素として用いられている。
  • 円グラフの識別表示の良い例
    Good グラフの構成要素を、色や要素だけでなくラベルで指し示している。
  • 入力フォームの必須項目の表示の悪い例。「赤になっている項目は必須」と示されており、必須項目のラベルテキストが赤色になっている。
    Bad 色のみで情報を伝えている。赤色が区別しづらい人にはどれが必須かわからない。

テスト・チェック方法

  • 上記例の画像のような部分はないか
  • 円グラフ、カレンダーのUIを作った時は要注意
  • 色弱者向けのカラーチェック・コントラストシミュレーションを行う

参考文献