don't turn traffic signals upside down - color accessibility in ui design
TRANSCRIPT
Don’t Turn Traffic Signals
Upside Down
Color Accessibility in UI Design
Don’t Turn Traffic Signals
Upside Down
Color Accessibility in UI Design
Don’t Turn Traffic Signals
Upside Down
Color Accessibility in UI Design
Don’t Turn Traffic Signals
Upside Down
Color Accessibility in UI Design
Don’t Turn Traffic Signals
Upside Down
Color Accessibility in UI Design
Don’t Turn Traffic Signals
Upside Down
Color Accessibility in UI Design
Dave SimonProduct Development: UI/UX
Dave SimonProduct Development: UI/UX
@ds
Dave SimonProduct Development: UI/UX
@ds @ds
Te
rm
in
ol
og
y
Te
rm
in
ol
og
y Color Blindness
Te
rm
in
ol
og
y CColor Vision Deficiency
Te
rm
in
ol
og
y Color Vision Deficiency
Te
rm
in
ol
og
y Color Vision Deficiency
Types of Color Vision Deficiency
Te
rm
in
ol
og
y Color Vision Deficiency
Types of Color Vision Deficiency‣ Trichromacy - normal vision where all three cones process light correctly.
Te
rm
in
ol
og
y Color Vision Deficiency
Types of Color Vision Deficiency‣ Trichromacy - normal vision where all three cones process light correctly.
‣ Anamalous Trichromacy - inherited, usually from maternal grandfather.
Te
rm
in
ol
og
y Color Vision Deficiency
Types of Color Vision Deficiency‣ Trichromacy - normal vision where all three cones process light correctly.
‣ Anamalous Trichromacy - inherited, usually from maternal grandfather.
‣ Protanomoly (reduced sensitivity to red)
Te
rm
in
ol
og
y Color Vision Deficiency
Types of Color Vision Deficiency‣ Trichromacy - normal vision where all three cones process light correctly.
‣ Anamalous Trichromacy - inherited, usually from maternal grandfather.
‣ Protanomoly (reduced sensitivity to red)
‣ Deuteranomoly (reduced sensitivity to green) - most common
Te
rm
in
ol
og
y Color Vision Deficiency
Types of Color Vision Deficiency‣ Trichromacy - normal vision where all three cones process light correctly.
‣ Anamalous Trichromacy - inherited, usually from maternal grandfather.
‣ Protanomoly (reduced sensitivity to red)
‣ Deuteranomoly (reduced sensitivity to green) - most common
‣ Red-green color blind have both protanomoly and deuteranomoly - difficulty with reds, greens, browns and oranges and confuse blue and purple hues.
Te
rm
in
ol
og
y Color Vision Deficiency
Types of Color Vision Deficiency‣ Trichromacy - normal vision where all three cones process light correctly.
‣ Anamalous Trichromacy - inherited, usually from maternal grandfather.
‣ Protanomoly (reduced sensitivity to red)
‣ Deuteranomoly (reduced sensitivity to green) - most common
‣ Red-green color blind have both protanomoly and deuteranomoly - difficulty with reds, greens, browns and oranges and confuse blue and purple hues.
‣ Tritanomaly (reduced sensitivity to blue) - rare. World looks red, pink, black, white, grey and turquoise.
Te
rm
in
ol
og
y Color Vision Deficiency
More Rare Types of Color Vision Deficiency
Te
rm
in
ol
og
y Color Vision Deficiency
More Rare Types of Color Vision Deficiency‣ Dichromacy - only have two types of cones
Te
rm
in
ol
og
y Color Vision Deficiency
More Rare Types of Color Vision Deficiency‣ Dichromacy - only have two types of cones
‣ Protanopia - unable to see red light
Te
rm
in
ol
og
y Color Vision Deficiency
More Rare Types of Color Vision Deficiency‣ Dichromacy - only have two types of cones
‣ Protanopia - unable to see red light
‣ Deuteranopes - unable to see green light
Te
rm
in
ol
og
y Color Vision Deficiency
More Rare Types of Color Vision Deficiency‣ Dichromacy - only have two types of cones
‣ Protanopia - unable to see red light
‣ Deuteranopes - unable to see green light
‣ Tritanopes - unable to see blue light
Te
rm
in
ol
og
y Color Vision Deficiency
More Rare Types of Color Vision Deficiency‣ Dichromacy - only have two types of cones
‣ Protanopia - unable to see red light
‣ Deuteranopes - unable to see green light
‣ Tritanopes - unable to see blue light
‣ Monochromacy (achromatopsia)- no color, only shades of grey
Te
rm
in
ol
og
y Color Vision Deficiency
More Rare Types of Color Vision Deficiency‣ Dichromacy - only have two types of cones
‣ Protanopia - unable to see red light
‣ Deuteranopes - unable to see green light
‣ Tritanopes - unable to see blue light
‣ Monochromacy (achromatopsia)- no color, only shades of grey
‣ Dogs are not monochromats, they just see more muted colors - like a washed out Instagram effect
ST
AT
IS
TIC
SColor Vision Deficiency
Color Vision Deficiency - Statistics
ST
AT
IS
TIC
SColor Vision Deficiency
Color Vision Deficiency - Statistics‣ 8% of men (1% deuteranopes, 1% protanopes, 1% protoanomolous, 5%
deuteranomolous)
ST
AT
IS
TIC
SColor Vision Deficiency
Color Vision Deficiency - Statistics‣ 8% of men (1% deuteranopes, 1% protanopes, 1% protoanomolous, 5%
deuteranomolous)
‣ 0.5% of women
ST
AT
IS
TIC
SColor Vision Deficiency
Color Vision Deficiency - Statistics‣ 8% of men (1% deuteranopes, 1% protanopes, 1% protoanomolous, 5%
deuteranomolous)
‣ 0.5% of women
‣ Tritanopes/tritanomalous and achromats (mono) are around 1 in 50,000
Fa
ct
oid
Color Vision Deficiency
About My Color Vision Deficiency
Fa
ct
oid
Color Vision Deficiency
About My Color Vision Deficiency‣ I am a “Moderate Deutan (doo-tan)” and have a “deuteranomaly.”
Fa
ct
oid
Color Vision Deficiency
About My Color Vision Deficiency‣ I am a “Moderate Deutan (doo-tan)” and have a “deuteranomaly.”
‣ My mom figured it out when I colored trees with green trunks and brown leaves as a kid.
Fa
ct
oid
Color Vision Deficiency
About My Color Vision Deficiency‣ I am a “Moderate Deutan (doo-tan)” and have a “deuteranomaly.”
‣ My mom figured it out when I colored trees with green trunks and brown leaves as a kid.
‣ How do I know what color something is?
Fa
ct
oid
Color Vision Deficiency
About My Color Vision Deficiency‣ I am a “Moderate Deutan (doo-tan)” and have a “deuteranomaly.”
‣ My mom figured it out when I colored trees with green trunks and brown leaves as a kid.
‣ How do I know what color something is?
‣ Crayola Crayons. Learn just like learning shapes, drew a patch of “red” and associate what I saw with the name red printed on the side.
Fa
ct
oid
Color Vision Deficiency
About My Color Vision Deficiency‣ I am a “Moderate Deutan (doo-tan)” and have a “deuteranomaly.”
‣ My mom figured it out when I colored trees with green trunks and brown leaves as a kid.
‣ How do I know what color something is?
‣ Crayola Crayons. Learn just like learning shapes, drew a patch of “red” and associate what I saw with the name red printed on the side.
‣ I still see red, I just see something different than what others interpret as red.
Fa
ct
oid
Color Vision Deficiency
About My Color Vision Deficiency‣ I am a “Moderate Deutan (doo-tan)” and have a “deuteranomaly.”
‣ My mom figured it out when I colored trees with green trunks and brown leaves as a kid.
‣ How do I know what color something is?
‣ Crayola Crayons. Learn just like learning shapes, drew a patch of “red” and associate what I saw with the name red printed on the side.
‣ I still see red, I just see something different than what others interpret as red.
‣ Color vision varies and depends not just on cones, but how the brain interprets the signals from your eyes.
IN
TE
RP
RE
TA
TIO
N
DE
UT
ER
AN
OP
IA
TR
IT
AN
OP
IA
RE
AL
IT
Y
So What?
So What?
How can we make our work more accessible by considering color?
CO
NT
EX
TDesign Features that
Give Users Context
CO
NT
EX
TDesign Features that
Give Users Context
Color
CO
NT
EX
TDesign Features that
Give Users Context
Color
Shape (Icons!)
CO
NT
EX
TDesign Features that
Give Users Context
Color
Shape (Icons!)
Size
CO
NT
EX
TDesign Features that
Give Users Context
Color
Shape (Icons!)
Size
Position
CO
NT
EX
TCombine Design Features
to Create Context
CO
NT
EX
TCombine Design Features
to Create Context
Button
CO
NT
EX
TCombine Design Features
to Create Context
Button
CO
NT
EX
TCombine Design Features
to Create Context
Button
A “flat” button with no contextual clues is useless.
CO
NT
EX
TCombine Design Features
to Create Context
Launch SkyNet Bring Back Firefly
CO
NT
EX
TCombine Design Features
to Create Context
Launch SkyNet
Two buttons, one bad, one good, no context.
Bring Back Firefly
Launch SkyNetLaunch SkyNet
CO
NT
EX
TCombine Design Features
to Create Context
Bring Back Firefly
Launch SkyNetLaunch SkyNet
CO
NT
EX
TCombine Design Features
to Create Context
Color adds context, but what does it look like to color vision
deficient individuals?
Bring Back Firefly
Launch SkyNetLaunch SkyNet
CO
NT
EX
TCombine Design Features
to Create Context
Bring Back Firefly
Launch SkyNetLaunch SkyNet
CO
NT
EX
TCombine Design Features
to Create Context
Triatanopic individuals lose the hint of “green means go” because the button is blue.
Bring Back Firefly
Launch SkyNetLaunch SkyNet
CO
NT
EX
TCombine Design Features
to Create Context
Bring Back Firefly
Launch SkyNetLaunch SkyNet
CO
NT
EX
TCombine Design Features
to Create Context
Without color, we’re back to meaningless.
Bring Back Firefly
Launch SkyNet☠ Launch SkyNet
CO
NT
EX
TCombine Design Features
to Create Context
☺ Bring Back Firefly
Launch SkyNet☠ Launch SkyNet
CO
NT
EX
TCombine Design Features
to Create Context
Adding a second design feature gives the button more contextual clues.
☺ Bring Back Firefly
☠ Launch SkyNet
CO
NT
EX
TCombine Design Features
to Create Context
☺ Bring Back Firefly
☠ Launch SkyNet
CO
NT
EX
TCombine Design Features
to Create Context
Adjusting size and position makes the choice even clearer.
☺ Bring Back Firefly
Th
e P
oin
t
ELIMINATE CONFUSION
Th
e P
oin
t
ELIMINATE CONFUSION
A user’s choice should NOT:
Th
e P
oin
t
ELIMINATE CONFUSION
A user’s choice should NOT:‣ Be hard to find
Th
e P
oin
t
ELIMINATE CONFUSION
A user’s choice should NOT:‣ Be hard to find‣ Be unclear
Th
e P
oin
t
ELIMINATE CONFUSION
A user’s choice should NOT:‣ Be hard to find‣ Be unclear‣ Cause hesitance
Th
e P
oin
t
ELIMINATE CONFUSION
A user’s choice should NOT:‣ Be hard to find‣ Be unclear‣ Cause hesitance‣ Be “Mystery Meat”
Th
e P
oin
t
ELIMINATE CONFUSION
Th
e P
oin
t
ELIMINATE CONFUSION
A user’s choice should be:
Th
e P
oin
t
ELIMINATE CONFUSION
A user’s choice should be:‣ Quick
Th
e P
oin
t
ELIMINATE CONFUSION
A user’s choice should be:‣ Quick‣ Clear
Th
e P
oin
t
ELIMINATE CONFUSION
A user’s choice should be:‣ Quick‣ Clear‣ Correct
Th
e P
oin
t
ELIMINATE CONFUSION
A user’s choice should be:‣ Quick‣ Clear‣ Correct‣ Easy
Th
e P
oin
t
ELIMINATE CONFUSION
Th
e P
oin
t
ELIMINATE CONFUSION
Don’t rely on a single design element.
Th
e P
oin
t
ELIMINATE CONFUSION
Don’t rely on a single design element.Combine color, shape, size, position, even time (animation) to create clarity.
Th
e P
oin
t
ELIMINATE CONFUSION
Don’t rely on a single design element.Combine color, shape, size, position, even time (animation) to create clarity.Consider context and consistency.
Th
e P
oin
t
ELIMINATE CONFUSION
Don’t rely on a single design element.Combine color, shape, size, position, even time (animation) to create clarity.Consider context and consistency.If the “continue” button is in the bottom right corner, have it there every time.
Th
e P
oin
t
ELIMINATE CONFUSION
Don’t rely on a single design element.Combine color, shape, size, position, even time (animation) to create clarity.Consider context and consistency.If the “continue” button is in the bottom right corner, have it there every time. Replacing it with a “sudo rm -rf” is just cruel.
Real World
Real World
A few examples of doing it wrong.
No
rm
al
DE
UT
ER
AN
OP
IA
GR
EY
SC
AL
E
DE
UT
ER
AN
OP
IA
IM
PR
OV
ED
RE
AL
IT
Y
Questions?
Questions?
Or share an example of color in UI used well or poorly.
FIN
FIN
Thank you!