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
Yahoo Newsletter Clicker Template
xuechunwu
0
300
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
720
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.6k
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2.5k
実利の世界で、表現者である
kiyou77
3
110
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
270
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
480
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1k
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
470
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
410
発表資料テンプレート / My slide template
thatblue
0
130
最速[要出典]アクセシビリティチェック
magi1125
2
130
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
Git: the NoSQL Database
bkeepers
PRO
427
64k
What's in a price? How to price your products and services
michaelherold
243
12k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Optimising Largest Contentful Paint
csswizardry
33
3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Mobile First: as difficult as doing things right
swwweet
222
9k
Code Review Best Practice
trishagee
65
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
Building an army of robots
kneath
302
44k
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