1.4.1 色だけで伝えない
色だけで情報や動作を促すような表現はせず、テキストや記号でも伝えるようにする。
具体例
-
Good 必須項目には赤色で【必須】と併記している。色以外でも伝えるが、色は直感的にわかりやすくするための補助的な要素として用いられている。 -
Good グラフの構成要素を、色や要素だけでなくラベルで指し示している。 -
Bad 色のみで情報を伝えている。赤色が区別しづらい人にはどれが必須かわからない。
テスト・チェック方法
- 上記例の画像のような部分はないか
- 円グラフ、カレンダーのUIを作った時は要注意
- 色弱者向けのカラーチェック・コントラストシミュレーションを行う
- Sketch向け：Stark
- Photoshop向け：Photoshopのメニューで「表示＞構成設定＞P型・D型」からシミュレーション（参考：色弱者向けのCUDソフトプルーフ（擬似変換）機能）
- Chrome拡張：ChromeLens