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

Transcript

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

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

3. そもそも色とは

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

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

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

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

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

9. 色弱とは

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

    （3つとも機能していない場合はモノクロになる）

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

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

13. ロービジョンとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    青

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

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

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

    World!! Hello, World!!

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

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

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