Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

そもそも色とは

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

色弱とは

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ロービジョンとは

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Protanopia（第一色盲）の見え方　

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

見分けやすい配色にする

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Protanopia（第一色盲）の見え方　

Slide 29

Slide 29 text

コントラストを上げる

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

ボケて見える人の見え方

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

参考 色盲の人にもわかるバリアフリープレゼンテーション法 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