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
62
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
200
Other Decks in Design
See All in Design
Bulletproof Design System with TypeScript
takanorip
6
3.7k
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
DC Style Redesign
mcduckyart
0
140
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
250
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
2.3k
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
280
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
180
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
Liquid Iron
mcduckyart
1
110
NAHO SHIMONO_Portfolio2025
nahohphp
0
930
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
490
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
230
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
A Tale of Four Properties
chriscoyier
160
23k
Docker and Python
trallard
45
3.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Language of Interfaces
destraynor
158
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Six Lessons from altMBA
skipperchong
28
3.9k
Designing for Performance
lara
610
69k
We Have a Design System, Now What?
morganepeng
53
7.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
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