Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Accessible_UI_Design_-_Adobe_Color_and_Color_Un...
Search
Rikiya Ihara / magi
October 22, 2020
Design
0
7.8k
Accessible_UI_Design_-_Adobe_Color_and_Color_Universal_Design.pdf
Rikiya Ihara / magi
October 22, 2020
Tweet
Share
More Decks by Rikiya Ihara / magi
See All by Rikiya Ihara / magi
最速[要出典]アクセシビリティチェック
magi1125
2
200
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
8
6.7k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
370
ゼロから学ぶWebアクセシビリティ~導入編~
magi1125
6
2.5k
アクセシビリティに関わる職種とは?〜freee編〜
magi1125
0
21k
アクセシビリティの効果測定
magi1125
1
8.1k
電子決済等代行事業者協会 アクセシビリティ勉強会「Webアクセシビリティの概要」
magi1125
0
15k
noteアクセシビリティ勉強会 〜画像編〜
magi1125
0
6.8k
自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
magi1125
0
6.9k
Other Decks in Design
See All in Design
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
330
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
570
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
630
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
440
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
500
portfolio2025_kanakoohata
kanako106
0
680
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
130
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.9k
マンガで分かるサービスデザインガイドライン
senryakuka
1
630
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.6k
We Have a Design System, Now What?
morganepeng
51
7.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Docker and Python
trallard
44
3.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Why Our Code Smells
bkeepers
PRO
336
57k
Unsuck your backbone
ammeep
669
57k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Rails Girls Zürich Keynote
gr2m
94
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Transcript
© 2020 Adobe. All Rights Reserved. Adobe Colorではじめる UIのカラーユニバーサルデザイン 伊賀
公一 | NPO法人カラーユニバーサルデザイン機構 副理事長 伊原 力也 | freee UXデザイナー
人間の色覚の多様性に対応した 配色デザインの必要性と アドビのアクセシビリティツール CUDO 伊賀 公一
色とはある帯域の電磁波を眼で電気に変換し、脳が感じている感覚
多くの人は赤緑青の3色とその混合ですべての色を表現できる
3色で表現できる理由は眼の中に3種の光センサーがあるから
4 Color Vision RH2 SWS1 SWS2 LWS 2 Color Vision
SWS1 LWS 何種のセンサーが眼にあるか
3Color Vision SWS1 LWS(M) LWS(L) 2 Color Vision
P SWS1 LWS(M) D SWS1 LWS(L) Human color vision Evolution
None
None
過去の少数派の色覚型に対する扱い ・小学校の色覚検査で判明(1922年〜 ・就職や進学に過大な制限があった(現在はほとんど廃止) ・自覚もないため、カミングアウトしない ・色に対する話題を避ける。 ・自分の色感に誇りを持てない
色と情報デザイン ・かつては情報デザインの配色は少なかった ・より多くの情報を ・より正確に ・より早く 伝えるために配色が有効活用されている ・色弱者が発生している
色弱者は ・各個人に対して医学的な治療ができないか 人類の進化の結果生まれた色覚の多様性は治療できない 2色覚を3色覚にするような補正めがねは理論的に不可能 ・ユニバーサルデザインで社会が対応する 利用者に多様な色覚の人がいることを想定して配色する 当事者に聞く(精度が高い・ハードルが高め) 色覚シミュレーション(精度は低い・ハードルが低い)
None
Color Vision Simulator
None
None
None
None
色覚シミュレーションの誤った使い方
元画像 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人 ・見分けやすい色が違う 色を微調整すれば判別できる ・色の名前でやりとりできない 半分くらいは当たる
None
Social Rule JIS safety color Z9103 (2018) JIS安全色普及委員会web www.safetycolor.jp
None
None
None
問題点の再分析 ・背景の上の文字が色覚型によって読めない ・強調された部分が感じられない ・色分けされた分類が伝わらない ・色の名前が伝わらない ・分かり易い色に微調整する ・色名を追記する
None
None
None
None
None
None
None
None
None
None
まとめ 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ステップ:根本から対応する&ルールを周知する • すでにある画面から改善するには:現状を収集して整理する
• 人の目でチェックしよう:結局、伝わるかどうかが大事
© 2020 Adobe. All Rights Reserved. Thank you. Twitter: @iga6,
@magi1125