Visual design for the visually impaired

Posted by:
Caroline Morley

Like Love Haha Wow Sad Angry

A test for colour blindness of orange and green spots

My Dad is colour blind. When I was a kid, he bought a tie to wear to his office with a brilliant pink splash of colour through the design. He had no idea and no one had the heart to tell him of his fashion faux-pas.

This article from UX Booth, looks at simple ways of tweaking web design to improve the experience of users, like my Dad, who see colours differently or have other problems with their vision.

The article says: “It’s estimated that 4.5% of the global population experience color blindness (that’s 1 in 12 men and 1 in 200 women), 4% suffer from low vision (1 in 30 people), and 0.6% are blind (1 in 188 people). It’s easy to forget that we’re designing for this group of users since most designers don’t experience such problems.”

So whether it’s using underlines as well as colour to indicate hyperlinked text, or including a text description of an image in the Alt tag, or increasing the design contrast so it is easy to read on a screen in the sun, there are many easy ways of creating more inclusive designs.

Here is an example showing what we might think of as an obvious error message (left) that uses only colour might be seen by colour blind user (right) and how using icons removes this ambiguity (below).

Demonstrating how a red highlighted box might look to someone with colour blindness

The form field design relies only on red and green to indicate fields with and without an error. Color blind users cannot differentiate the fields highlighted in red.

Showing how adding icons can improve the visibility of colour change

The use of icons and labels to show which fields are invalid better communicates the information to a color blind user.

And with good written descriptions, like these used on ASOS, my Dad can confidently only buy an ugly pink tie if that’s he wants.

Screen Shot 2017-07-07 at 15.13.57

Read Full Article
Like Love Haha Wow Sad Angry

Color, Digital Design, Graphic design, UI UX

One response to “Visual design for the visually impaired”

  1. Damion Damion says:

    Great story Caroline

Leave a Reply to Damion Cancel reply

Your email address will not be published.