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
63
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
210
Other Decks in Design
See All in Design
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.3k
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
420
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
140
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
210
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
520
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.6k
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
160
maki setoguchi
maki_setoguchi
0
530
Yumika Yamada Portfolio
yumii
0
2.1k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
4.2k
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
2
2.2k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
660
Documentation Writing (for coders)
carmenintech
75
5.1k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Code Reviewing Like a Champion
maltzj
526
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Being A Developer After 40
akosma
91
590k
Why Our Code Smells
bkeepers
PRO
340
57k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.9k
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