A designer's guide to visual accessibility

Advertising, magazines, user interfaces, websites; the list goes one. But, every single design we create needs to be accessible to everyone, including those with visual dysfunctions. Studies of drug packaging1, software interfaces2 and more recently print show that accessibility is only considered in half of all print design projects3. With 15% of the world’s population having some form of sensory or cognitive deficiency4 it places design accessibility at the top of a designer’s considerations.

Read how Print design is failing the elderly and hard of sight

As the world’s population ages and the new focus on user-centric design, it is a consideration that is growing into not just a want, but a need.

What are the main design principles for visual accessibility?

Visual accessibility is determined by how easily each component of your design is viewed and perceived by a reader. Including everything from photography choice, typefaces, colours, even the relationship between foreground and background elements.

48% of a designer's work is inaccessible to 15% of the world's population. That's roughly 1 billion 68 million 750 thousand people.5

In a recent study, Dr Kate Cornish found that designers only considered visual accessibility in just 52% of projects6. Leaving 48% of a designer's work is inaccessible 15% of the world's population.

Follow these simple design principles and you will create work that is accessible to everyone.

Colour

At some point, you will have come across colour blindness, whether being taught in school or having a friend with colour blindness. Colour blindness affects approximately 1 in 12 men and 1 in 200 women.7 Beyond making interesting pub talk this can seriously affect how people see and interact with a design.

The beautiful colour scheme you collated looks entirely different to someone with colour blindness, and in some cases the colour shift it so similar it becomes difficult to differentiate between similar hues. Not great for any CTA’s or UI patterns you have carefully designed.

What images look like to someone with colour blindness 1. Normal vision. 2. Protanopia - Unable to perceive any red. 3. Deuteranopia - Unable to perceive green. 4. Tritanopia - Unable to perceive ‘blue’ light. 5. Achromatopsia - Rarest and the most severe form of color blindness, unable to perceive any colour at all.

Choosing colour

  • When using type used over a coloured background or image keep colour contrast to around 70%.
  • Ensure contrast between hues by keeping main design elements as complimentary colours.
  • Make sure that the colour you choose aren’t similar in vibrancy and brightness. It causes 'simultaneous contrast' (chromostereopsis) which is when two vibrant colours appear like they are vibrating against each other causing eye strain and fatigue.
  • Avoid the following colour combinations for these above reasons8:
    1. red and green
    2. yellow and bright green
    3. light blue and pink
    4. dark blue and violet

Simultaneous contrast causes visual fatigue An example of simultaneous contrast, making the colours appear like they are vibrating.

Using colour

  • Avoid using colour as the only visual cue. In minimalist design and the drive towards slicker interfaces designers are more and more relying on colour to give a user feedback or indicate interactivity. When a person is unable to see these cues and there is no supporting information it can be a very confusing experience.
    Colour blindness in UI design, drawback of only using colour as a cue Left: Using only colour as a visual cue. Middle: How it appears to someone with colour blindness. Right: Suggested additional layer of information.

  • Use texture and patterns. Combine colour with patterns for another layer of communication.

Coloured type

  • Restrict any coloured type to headlines, subtitles or standout elements. Sticking to black on white for body copy to get the best contrast.

Type

Type choice can really affect how a person reads and acts on the informative content, whether it is long form copy or as stand out headlines. With print design specifically, there is a constant trade-off between type size and the associated cost of printing at a larger size. There are a number of different ways this can be added without increasing costs.

Choosing a typeface

  • Choosing a typeface with a good contrast between the strokes and counters. Too much or too little and it is more difficult for with more blurred vision to read.
  • Choosing a typeface with a larger x-height makes a typeface appear larger and therefore easier to read without increasing the type size9.
  • Avoid more decorative typefaces for blocks of body copy.
  • People read sans serif fonts quicker than serifs.10

Typesize

  • Organisations for the blind suggest a body copy of 12pt to 18pt.11 This however, isn't always practical.

Using a typeface

  • Leading is best at a suggested 120% of the type size.
  • Keep an eye on tracking. Be careful not to track in or out the typeface too much as for people with more blurred vision this is more difficult to read.
  • When typesetting over a colored background or image make sure there is around a 70% color contrast.
  • Keep paragraph widths to around 55 characters a line for screen. Studies have shown this to give the best for comprehension.12

References

  1. Swayne, T. Information design for patient safety. 2005.

  2. Keates, S. Clarkson, J. Robinson, P. Developing a practical inclusive interface design approach 2002.

  3. Cornish, K. Goodman-Deane, J. Ruggeri, K. Clarkson, J. Visual accessibility in graphic design: A client-designer communication failure 2015

  4. World Economic Forum Global Population Ageing: Peril or Promise? 2012

  5. Cornish, K. Goodman-Deane, J. Ruggeri, K. Clarkson, J. Visual accessibility in graphic design: A client-designer communication failure 2015

  6. Ibid

  7. http://www.colourblindawareness.org/

  8. Nevid, J. Essentials of Psychology: Concepts and Applications 2014

  9. Bernard, M. Liao, C. Mills, M. [The Effects of Font Type and Size on the Legibility and

  10. Reading Time of Online Text by Older Adults](http://dl.acm.org/citation.cfm?id=634173) 2001
  11. Woods, R. Davis, K. Scharff, L. Effects of Typeface and Font Size on Legibility for Children. 2005

  12. Clear Print Guide

  13. Dyson, M. Haselgrove, M. The influence of reading speed and line length on the effectiveness of reading from screen. 2001

Form for thought - A blog about by Dura design psychology and design thinking for graphic designers, web designers, ui designers, ux and illustrators. Looking into the psychology of colour, user behaviour and advertising psychology.