Designing for the colorblind

1.
COLOUR BLINDNESS AND USERINTERFACE

2.
How do we designfor a person who cannot see colours properly?

3.
Human eyes havephotoreceptors called cones which are responsible for colour vision Three types: red, green, blue Defects of the cones can lead to worsening of colour vision THE RGB IN   OUR HEAD

4.
THE RGB IN  OUR HEAD Human eyes have photoreceptors called cones which are responsible for colour vision Three types: red, green, blue Defects of the cones can lead to worsening of colour vision

5.
THE RGB IN  OUR HEAD Human eyes have photoreceptors called cones which are responsible for colour vision Three types: red, green, blue Defects of the cones can lead to worsening of colour vision

6.
BEING COLOUR BLIND Deﬁciency in theway a person sees colour 8% of all men and 0.5% of all women suﬀer from colour blindness

7.
BEING COLOUR BLIND Deﬁciency in theway a person sees colour 8% of all men and 0.5% of all women suﬀer from colour blindness

8.
TRICHROMACY

9.
TYPES OF COLOUR BLINDNESS Deuteranopia Unable toperceive ‘green’ light The most common form of colour blindness

10.
TYPES OF COLOUR BLINDNESS Protanopia Unable toperceive any ‘red’ light

11.
TYPES OF COLOUR BLINDNESS Tritanopia Unable toperceive ‘blue’ light Extremely rare

12.
TYPES OF COLOUR BLINDNESS Monochromacy Sees nocolour at all Diﬀerent shades of grey ranging from black to white

14.
DEUTERANOPIA

15.
PROTANOPIA

16.
TRITANOPIA

17.
MONOCHROMACY

18.
COLOUR BLINDNESS IN THE DIGITAL WORLD Wayswe can improve colour accessibility for colour blind users

19.
Colour Combinations and Contrast To recogniseobjects, colour blind people rely on the luminance contrast There are colour combinations we need to avoid because they tend to have low contrast ratios or it’s hard to diﬀerentiate them

20.
Colour Combinations and Contrast List ofcolour combinations to avoid whenever possible: green-red green-blue green-brown green-black green-grey blue-grey light green-yellow blue-purple green-red and blue-purple colour combinations to a person with protanopia

21.
Use patterns and textures It’sadvisable to add patterns and textures to emphasise contrast between objects Add text labels to make them even easier to understand vola app uses pattern for their pie chart

22.
Use patterns and textures It’sadvisable to add patterns and textures to emphasise contrast between objects Add text labels to make them even easier to understand vola app uses pattern for their pie chart

23.
Utilise colours andsymbols Use captions, symbols, or icons on any colour designation to preserve a function

24.
Utilise colours andsymbols Use captions, symbols, or icons on any colour designation to preserve a function

25.
Utilise colours andsymbols Use captions, symbols, or icons on any colour designation to preserve a function two dots in colour blind modetwo dots in normal mode

26.
Use text labels Adding textlabels to colour ﬁlters improves accessibility

27.
Use text labels Adding textlabels to colour ﬁlters improves accessibility

28.
Underline links A person with monochromacy wouldn’tbe able to distinguish regular texts and links at all It’s a good idea to add an underline to text links

29.
Underline links A person with monochromacy wouldn’tbe able to distinguish regular texts and links at all It’s a good idea to add an underline to text links

30.
Increase the sizeof primary button Reformation uses colour and size to emphasise primary button Use icons, borders, or font weight to diﬀerentiate buttons Make primary buttons stand out

31.
Reformation uses colourand size to emphasise primary button Increase the size of primary button Use icons, borders, or font weight to diﬀerentiate buttons Make primary buttons stand out

32.
Make primary buttons standout Increase contrast between primary and secondary buttons Try diﬀerent placement combinations Firebox presents their primary button in the bottom-right corner and the secondary button in the top-left corner

33.
Make primary buttons standout Try diﬀerent placement combinations Firebox presents their primary button in the bottom-right corner and the secondary button in the top-left corner Increase contrast between primary and secondary buttons

34.
Mark required fields onforms Mark required fields with an asterisk (*) Label fields with the word ‘Required’ or ‘Optional’

35.

36.

37.

38.
To summarise Be awareof colour combinations and contrasts Use patterns and textures Utilise colours and symbols Use text labels Underline links Make primary buttons stand out Mark required ﬁelds on forms

39.

40.

41.

42.

43.

44.

45.
Color Blind Awareness Helpfullinks How to design (in Sketch, Photoshop and Web) for colour blind users Color blindness: how to design an accessible user interface Designing UI with Color Blind Users in Mind

46.
THANK YOU!

Designing for the colorblind

More Related Content

Similar to Designing for the colorblind

Recently uploaded

Designing for the colorblind