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.

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.

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.

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.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.

Form for thought - A blog about 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.