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
The Black and Blue Dress
Search
jongthechemist
October 08, 2020
Design
1
61
The Black and Blue Dress
jongthechemist
October 08, 2020
Tweet
Share
More Decks by jongthechemist
See All by jongthechemist
Integration Test with @testing-library
jongthechemist
0
170
Other Decks in Design
See All in Design
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
650
プロダクトデザインの「守破離」の「破」について
hayashirine
0
300
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
560
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
110
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
600
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
850
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
170
太田博三(@usagisan2020)
otanet
0
220
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
最速[要出典]アクセシビリティチェック
magi1125
2
180
Masked shaman-Storyboard 2025
ashley0521
0
130
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
570
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
Speed Design
sergeychernyshev
25
760
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Agile that works and the tools we love
rasmusluckow
328
21k
How to Ace a Technical Interview
jacobian
276
23k
Building an army of robots
kneath
302
45k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Practical Orchestrator
shlominoach
186
10k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Transcript
KHAIRUL NIZAM SAIFUL It’s about accessibility BLACK AND BLUE OR
WHITE AND GOLD?
THE DRESS
- Khairul Nizam Saiful - From Kuching, Sarawak - Chemical
Engineer - Hobby - Programming (Until it became a job) - Full-stack Developer @feat-stores - Colorblind (Diagnosed at 15 yo) ABOUT ME
ISHIHARA TEST
COLORBLINDNESS Red? Pink? Grey? Yellow? Green? Orange? Blue? Purple? Green?
Grey? Maroon?
DEFINITION Color blindness (color vision deficiency) is the decreased ability
to see color or differences in color. CAUSES Hereditary and sex-linked, affecting predominantly males. Acquired - Trauma - Brain/retinal damage - Diseases - age-related macular degeneration, diabetes, Vit A deficiency - Drugs and chemicals
- Trichromacy - Human - 10M colors - Monochromacy -
Whales, sharks, sea lions - 200 - Dichromacy - Placental mammals - 40k - Tetrachromacy - Bird, fish, amphibians - 100M - Pentachromacy - Butterflies - 10B COLOR VISION
SPECTRUM Trichromacy Deuteranopia Protanopia Tritanopia Monochromacy Dichromacy Achromatopsia
SPECTRUM Deuteranopia Protanopia Tritanopia Monochromacy Dichromacy Achromatopsia 1 in 30
000 1 in 12 1 in 200 75% 25% > 1% Affect equally
SPECTRUM 10% 5% 4%
LIFE
None
https://www.youtube.com/watch?v=3Mg_galcbA4
- Contrast ACCESSIBILITY https://coolors.co/contrast-checker
None
- Palette ACCESSIBILITY ❌ ❌
- Patterns and Shapes ACCESSIBILITY http://www.coloradd.net/
- Simulators ACCESSIBILITY https://www.color-blindness.com/ coblis-color-blindness-simulator/
57% saw the dress as blue and black; 30% saw
it as white and gold Chromatic adaptation
None
- Visual impairment - 246M low vision, 39M total blindness
- Eg. Web Accessibility Initiative (WAI-ARIA): https://www.w3.org/WAI/standards-guidelines/aria/ - How a blind person uses a phone: https://www.youtube.com/watch?v=c0nvdiRdehw - Deafness - 466M hearing loss - Eg. Sign language, Closed captioning - Physical disability - 2 in 1000 liveborn with cerebral palsy - Eg. Xbox Adaptive Controller BEYOND COLOUR-BLINDNESS
Q&A THANK YOU
Farnsworth–Munsell 100 hue test
ENCHROMA