Accessible_UI_Design_-_Adobe_Color_and_Color_Universal_Design.pdf

© 2020 Adobe. All Rights Reserved. Adobe Colorではじめる UIのカラーユニバーサルデザイン伊賀
公一 | NPO法人カラーユニバーサルデザイン機構副理事長伊原力也 | freee UXデザイナー

人間の色覚の多様性に対応した  配色デザインの必要性と  アドビのアクセシビリティツール  CUDO 伊賀公一 

色とはある帯域の電磁波を眼で電気に変換し、脳が感じている感覚  

多くの人は赤緑青の３色とその混合ですべての色を表現できる  

３色で表現できる理由は眼の中に３種の光センサーがあるから  

4 Color Vision  RH2 SWS1 SWS2 LWS  2 Color Vision 
SWS1 LWS   何種のセンサーが眼にあるか  

３Color Vision   SWS1 LWS(M) LWS(L)   2 Color Vision 
P SWS1 LWS(M)  D SWS1 LWS(L)   Human color vision Evolution 

過去の少数派の色覚型に対する扱い  ・小学校の色覚検査で判明（1922年〜  ・就職や進学に過大な制限があった（現在はほとんど廃止）  ・自覚もないため、カミングアウトしない  ・色に対する話題を避ける。  ・自分の色感に誇りを持てない 

色と情報デザイン  ・かつては情報デザインの配色は少なかった  ・より多くの情報を  ・より正確に  ・より早く　伝えるために配色が有効活用されている  ・色弱者が発生している 

色弱者は  ・各個人に対して医学的な治療ができないか  　　　人類の進化の結果生まれた色覚の多様性は治療できない  　　　2色覚を3色覚にするような補正めがねは理論的に不可能  ・ユニバーサルデザインで社会が対応する  　　　利用者に多様な色覚の人がいることを想定して配色する  　　　当事者に聞く（精度が高い・ハードルが高め）  　　　色覚シミュレーション（精度は低い・ハードルが低い） 

Color Vision Simulator 

色覚シミュレーションの誤った使い方  

元画像      Adobe PS      Stark XD   
  Stark Scketch  Reliability of Color vision Simulator 

Color name problem 

Color Name  • White  • Black  • Red  • Blue 
• Yellow  • Green  • Purple Violet  • Gray ……... 

困ること  ・理解されてない／自覚もない  　　　　白黒だと思われている　→白黒ではない  　　　　1万人に1人くらいだと思われている→男性10〜20人に1人  ・見分けやすい色が違う  　　　　色を微調整すれば判別できる  ・色の名前でやりとりできない  　　　　半分くらいは当たる 

Social Rule  JIS safety color Z9103 (2018)  JIS安全色普及委員会web www.safetycolor.jp  

問題点の再分析  ・背景の上の文字が色覚型によって読めない  ・強調された部分が感じられない  ・色分けされた分類が伝わらない  ・色の名前が伝わらない  ・分かり易い色に微調整する    ・色名を追記する 

まとめ  40 

多様な色覚とAdobe アクセシビリティツール  41  • 人類の色覚は進化の結果多様性がある  • 少数派の色覚型は世界に2—3億人いる  • 医学的な治療ではなく社会が共生のために対応すべき  •
情報デザインには多様な色覚に対応した配色のユニバーサルデザイン＝CUDが必要  • 色に変えての文字追記や形状変化だけでは情報の不公平が起こる  • デザイナーはシミュレータなどを使用して色の微調整を行うと良い 

誰もが自分の色の見え方に誇りを持てる社会に  thank you  Koichi Iga    facebook.com/koichi.iga 

多くの人が見分けられる  UIデザインのプロセス  freee 伊原力也 

多くの人が見分けられるUIデザインのプロセス  44  • アクセシブルな色づかいの 3 段階  • チェックと調整の 5 アプローチ 
• 抽象から具体への 5 ステップ 

アクセシブルな色づかいの3段階  45 

アクセシブルな色づかいの3段階  46  1. 色以外でも伝達する  2. コントラストを確保する  3. 色覚多様性に対応する 

1. 色以外でも伝達する  47  『デザイニングWebアクセシビリティ』より 

1. 色以外でも伝達する  48  『デザイニングWebアクセシビリティ』より 

1. 色以外でも伝達する  『patternomaly』より 

2. コントラストを確保する  『デザイニングWebアクセシビリティ』より  50 

2. コントラストを確保する  51  『達成基準 1.4.11: 非テキストのコントラストを理解する』より 

2. コントラストを確保する  52    日本語  アルファベット  UIや図版  3:1以上  • 30px以上のテキスト
  • 24px以上の太字  • 24px以上のテキスト   • 19px以上の太字  • 背景色や隣接色との差異   • 隣接色との境界線  • フォーカスや選択を  色で示すときの差異   4.5:1以上  上記未満の  サイズのテキスト  上記未満の  サイズのテキスト  （規定なし）  『達成基準 1.4.3: コントラスト (最低限)を理解する』および『達成基準 1.4.11: 非テキストのコントラストを理解する』より 

3. 色覚多様性に対応する  53  『東京都カラーユニバーサルデザインガイドライン』より 

チェックと調整の5アプローチ  54 

チェックと調整の5アプローチ  55    チェック  調整補助  色以外で伝達  • Stark  • Photoshop 
（なし）  コントラスト  • Stark  • contrast.app  • Contrast Finder  • Color Safe  色覚多様性  • (Stark) • Photoshop  • Adobe Color 

色以外で伝達：チェック  56  チェック：Stark (Pro)

コントラスト：チェックと調整  57  チェック：Stark (Pro) 調整補助：Contrast Finder

色覚多様性：チェックと調整  58  チェック：Photoshop 調整補助：Adobe Color

抽象から具体への5ステップ  59 

抽象から具体への5ステップ  ムードボード  カラーパレット  スタイルタイル  コンポーネント  画面デザイン  60 

ムードボード＋カラーパレット原案  61 

アクセシビリティツールで競合回避  62 

OKなら保存  63 

XDからカラーテーマ呼び出し  64 

スタイルタイル  65 

スタイルタイル：色以外で伝達をチェック  66 

スタイルタイル：コントラストをチェック  67 

スタイルタイル：コントラストを調整  68 

スタイルタイル：色覚多様性をチェック  69 

スタイルタイル：色覚多様性をチェック  70 

スタイルタイル：色覚多様性に対応する調整  71 

Contrast Grid でパターン出し  72  『Eightshapes Contrast Grid』より 

UIコンポーネント  73 

画面デザイン  74 

根本の段階から意識しておく  75  • UI検討の初期段階でチェック＆調整しておくことで軸をつくる  • Contrast Grid で把握しつつUIパターンを増やし、色を展開する  ※展開しきってから調整を行うとバランス取りに苦労する  •
一品物のUIや図版があるケースでは個別にチェック＆調整を行う  • 検証済のパターンのみ使うよう留意＆周知する  ※置き方次第で、コントラストもCUDも、容易にNGになり得る 

検証済のパターンのみ使うよう留意＆周知する  76 

すでにある画面から改善するには  77 

逆流して整理する  ムードボード  カラーパレット  スタイルタイル  コンポーネント  画面デザイン  78 

逆流して整理する  79  1. 既存の色を収集してグループ分けする  2. 構成要素を特定する（重複を整理する）  3. パターンを定義する  4. アクセシブルな色に調整する 
『Design Systems』より 

既存の色を収集してグループ分けする  『Color Audit』より 

既存の色を収集してグループ分けする  81  • 様々なテキストのタイプと階層構造  （本文、見出し、ブロック引用）を表示する  • リンクと行為（要となるCTA、補足CTA、リンク）を強調表示する  • メッセージに注意を引く、メッセージに違いをつける（確認、警告）  •
コンテンツを区切る、または強調する（背景、境界線）  • データのタイプを区別する（表、グラフ内）  『Design Systems』より 

人の目でチェックしよう  82 

東京都新型コロナウイルス感染症対策サイト  83  『東京都新型コロナウイルス感染症対策サイト』より 

東京都新型コロナウイルス感染症対策サイト  84  『チャートのカラーをアクセシビリティを考慮した色へ変更する #1172』より 

東京都新型コロナウイルス感染症対策サイト  85  『チャートのカラーについての再考、パターンの提案、アンケート作成を行う #2364』より 

board：CUD対応  86  『多様な色覚に配慮したカラーユニバーサルデザイン（CUD）に対応しました』より 

フェンリル：弱視当事者を交えたワークショップ  87  『新卒社員がアクセシビリティ勉強会に参加して感じたこと』より 

freee：色覚多様性レビュー会  88  『freeeアクセシビリティー・ガイドラインを一般公開しました』より 

まとめ  89 

多くの人が見分けられるUIデザインのプロセス  90  • アクセシブルな色づかいの3段階：色以外で伝達→コントラスト→色覚対応  • チェックと調整の5アプローチ：シミュレータと調整ツールを併用  • 抽象から具体への5ステップ：根本から対応する＆ルールを周知する  • すでにある画面から改善するには：現状を収集して整理する 
• 人の目でチェックしよう：結局、伝わるかどうかが大事 

Accessible_UI_Design_-_Adobe_Color_and_Color_Universal_Design.pdf

Accessible_UI_Design_-_Adobe_Color_and_Color_Universal_Design.pdf

More Decks by Rikiya Ihara

Other Decks in Design

Featured

Transcript