Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
カラーユニバーサルデザイン / color universal design
howdy39
June 08, 2018
Design
0
190
カラーユニバーサルデザイン / color universal design
howdy39
June 08, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
howdy39
4
310
howdy39
5
6.2k
howdy39
1
1.4k
howdy39
0
120
howdy39
0
42
howdy39
0
68
howdy39
0
35
howdy39
0
87
howdy39
1
740
Other Decks in Design
See All in Design
jvmal
0
250
messymaddy
0
160
xai
0
270
masatohonda
3
1.2k
danpark001
1
3.1k
allenzhangart
0
690
rvillarreal
0
130
masakioka
1
200
tamadama
0
100
gagews
0
110
rvillarreal
0
140
mariannasmith
0
210
Featured
See All Featured
mthomps
39
2.3k
tmm1
61
8.5k
holman
461
280k
sachag
267
17k
jrom
114
7.1k
malarkey
192
8.6k
eitanlees
111
9.9k
jakevdp
775
200k
philhawksworth
190
17k
schacon
145
6.6k
swwweet
206
6.8k
holman
288
130k
Transcript
カラーユニバーサルデザイン 2018/06/08 第8回 TG社フロントエンド勉強会 Tatsuya Nakano(howdy39)
カラーユニバーサルデザイン とは 色の見え方が一般と異なる(先天的な色覚異常、白内障、緑内障 など) 人にも情報がきちんと伝わるよう、色使いに配慮したユニ バーサルデザイン 出典: Wikipedia - カラーユニバーサルデザイン
そもそも色とは
そもそも色とは 380nm ~780nm 範囲の波長の電磁波を色(光)として認識 生物が物を判別するために脳内で色を付けている
目は可視光線(色)のセンサー
錐体細胞と桿体細胞 色を検知する → 錐体細胞 明るさを検知する → 桿体細胞
錐体細胞が反応する範囲の波長
錐体細胞の反応具合で色が決まる
色弱とは
色弱とは • 錐体細胞の反応する波長がずれている • 日本人の場合、男性 5% 女性 0.2% ※色盲 完全に機能していない錐体細胞があることを色盲と呼ぶ
(3つとも機能していない場合はモノクロになる)
赤の錐体細胞がずれを起こしている場合
右に行けば行くほど差が大きくなる Common 多くの人 Protanomaly 第一色弱 Protanopia 第一色盲
ロービジョンとは
ロービジョンとは • 眼鏡やコンタクトレンズを使っても見ることが十分に視力があ がらず、生活に不便を感じる状態 • 日本には、100万人いるとも言われる ※ 緑内障などでの視野欠損の人などもロービジョンと呼ばれる
ロービジョンの見え方(ボケて見えるタイプ)
Webサイトで 色弱/色盲/ロービジョンの見え方を再現する
NoCoffee Chrome 拡張機能 https://chrome.google.com/webstore/detail/nocoffee/jjeeggmb nhckmgdhmgdckeigabjfbddl
Spectrum Chrome 拡張機能 https://chrome.google.com/webstore/detail/spectrum/ofcleme gkcmilinpcimpjkfhjfgmhieb
カラーユニバーサルデザイン
色だけに頼ったUIにしない
色だけに頼ったUIにしない
Protanopia(第一色盲)の見え方
Webでたまに見かける残念なUI 赤色の項目は必須入力です 姓: 名: 年齢: 性別: メールアドレス:
色だけに頼っていない良い例 • TVリモコンのカラーボタン • 東京メトロの路線図 • トリアージ • カレンダー
見分けやすい配色にする
配色 出来るだけ多くの人に見分けやすい配色を選ぶ ポイントは 赤と緑
配色の変更 黒 赤 黒 赤 黄 黄 緑 緑 青
青
Protanopia(第一色盲)の見え方
コントラストを上げる
コントラストを上げる Hello, World!! Hello, World!! Hello, World!! Hello, World!! Hello,
World!! Hello, World!!
ボケて見える人の見え方
まとめ 視覚的弱者は全盲だけではない NoCoffee などの拡張機能を使えば、見え方の再現ができる 1. 色だけに頼ったUIにしない 2. 見分けやすい配色にする 3. コントラストを上げる
参考 色盲の人にもわかるバリアフリープレゼンテーション法 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