カラーユニバーサルデザイン / color universal design

Transcript

1. カラーユニバーサルデザイン
   2018/06/08 第8回 TG社フロントエンド勉強会
   Tatsuya Nakano(howdy39)
   

   View Slide

2. カラーユニバーサルデザイン とは
   色の見え方が一般と異なる（先天的な色覚異常、白内障、緑内障
   など） 人にも情報がきちんと伝わるよう、色使いに配慮したユニ
   バーサルデザイン
   出典: Wikipedia - カラーユニバーサルデザイン
   

   View Slide

3. そもそも色とは
   

   View Slide

4. そもそも色とは
   380nm ～780nm 範囲の波長の電磁波を色（光）として認識
   生物が物を判別するために脳内で色を付けている
   

   View Slide

5. 目は可視光線（色）のセンサー
   

   View Slide

6. 錐体細胞と桿体細胞
   色を検知する → 錐体細胞
   明るさを検知する → 桿体細胞
   

   View Slide

7. 錐体細胞が反応する範囲の波長
   

   View Slide

8. 錐体細胞の反応具合で色が決まる
   

   View Slide

9. 色弱とは
   

   View Slide

10. 色弱とは
    ● 錐体細胞の反応する波長がずれている
    ● 日本人の場合、男性 5% 女性 0.2%
    ※色盲
    完全に機能していない錐体細胞があることを色盲と呼ぶ
    （3つとも機能していない場合はモノクロになる）
    

    View Slide

11. 赤の錐体細胞がずれを起こしている場合
    

    View Slide

12. 右に行けば行くほど差が大きくなる
    Common
    多くの人
    Protanomaly
    第一色弱
    Protanopia
    第一色盲
    

    View Slide

13. ロービジョンとは
    

    View Slide

14. ロービジョンとは
    ● 眼鏡やコンタクトレンズを使っても見ることが十分に視力があ
    がらず、生活に不便を感じる状態
    ● 日本には、100万人いるとも言われる
    ※ 緑内障などでの視野欠損の人などもロービジョンと呼ばれる
    

    View Slide

15. ロービジョンの見え方（ボケて見えるタイプ）
    

    View Slide

16. Webサイトで
    色弱/色盲/ロービジョンの見え方を再現する
    

    View Slide

17. NoCoffee
    Chrome 拡張機能
    https://chrome.google.com/webstore/detail/nocoffee/jjeeggmb
    nhckmgdhmgdckeigabjfbddl
    

    View Slide

18. Spectrum
    Chrome 拡張機能
    https://chrome.google.com/webstore/detail/spectrum/ofcleme
    gkcmilinpcimpjkfhjfgmhieb
    

    View Slide

19. カラーユニバーサルデザイン
    

    View Slide

20. 色だけに頼ったUIにしない
    

    View Slide

21. 色だけに頼ったUIにしない
    

    View Slide

22. Protanopia（第一色盲）の見え方　
    

    View Slide

23. Webでたまに見かける残念なUI
    赤色の項目は必須入力です
    姓：
    名：
    年齢：
    性別：
    メールアドレス：
    

    View Slide

24. 色だけに頼っていない良い例
    ● TVリモコンのカラーボタン
    ● 東京メトロの路線図
    ● トリアージ
    ● カレンダー
    

    View Slide

25. 見分けやすい配色にする
    

    View Slide

26. 配色
    出来るだけ多くの人に見分けやすい配色を選ぶ
    ポイントは 赤と緑
    

    View Slide

27. 配色の変更　
    黒 赤
    黒 赤 黄
    黄 緑
    緑 青
    青
    

    View Slide

28. Protanopia（第一色盲）の見え方　
    

    View Slide

29. コントラストを上げる
    

    View Slide

30. コントラストを上げる
    Hello, World!!
    Hello, World!!
    Hello, World!!
    Hello, World!!
    Hello, World!!
    Hello, World!!
    

    View Slide

31. ボケて見える人の見え方
    

    View Slide

32. まとめ
    視覚的弱者は全盲だけではない
    NoCoffee などの拡張機能を使えば、見え方の再現ができる
    1. 色だけに頼ったUIにしない
    2. 見分けやすい配色にする
    3. コントラストを上げる
    

    View Slide

33. 参考
    色盲の人にもわかるバリアフリープレゼンテーション法
    https://www.nig.ac.jp/color/gen/
    目に見える色は脳の幻想　 (￣◇￣;)ｴｯ・・!!! ( 生物学 ) - 無所属の時間で生きる・・・
    https://blogs.yahoo.co.jp/b_team_bb/31238266.html
    Web・アプリとカラーユニバーサルデザイン
    https://freshlive.tv/tech-conference/166044
    カラーユニバーサルデザイン推奨配色セットガイドブック
    http://www2.cudo.jp/wp/wp-content/uploads/2016/10/CUD_Colorset_Guidebook.pdf
    WCAG2.0 コントラスト (最低限)
    https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
    

    View Slide