How to design your website for visually impaired users

Visually impaired can mean many things. A user could be hard of sight, colour blind, or even dyslexic.

Hard of sight:There are many important elements to incorporate into a website for users who are hard of sight:

Contrasts in colourStrong call to actions (use red or a bright colour)Scalable pagesSingle columnsA screen reader

For people who are hard of sight, black or dark grey on white is the clearest way of viewing copy. The colour of the background and the colour of the copy should be in contrast; for example a lighter grey copy on a cream background would make things difficult for people who are hard of sight as tonally the colours would appear similar.

Copy aside, the rest of the site should have a very clear navigation and strong call to actions. For example, if a website had navy blue as its brand colour, it would be important to make the calls to action a bright, contrasting colour like bright red, and to enlarge the size of these buttons to make them stand out.

It is essential that the website is scalable. This means that users should be able to tab up and down the scale of the entire page. Different browsers process this in different ways, so build the page in such a way that the whole page scales together, and images, text etc all increase at the same rate. This ensures that the layout remains intact.

Using large titles and one column templates on most pages will allow text to be scaled effectively.

A good method when designing a website for people who are hard of sight is to squint at your design so the text is illegible and you can just see colour shape and layout. Can you still see the call to actions? Would you still know how to navigate around this page?

Screen readers can only be used effectively if the website is coded in html and not flash. Currently, flash files are not readable by Google so screen readers will not work.

Colour blindAs with visually impaired people, it is important that contrasts are used when selecting colours. Colour-blind users will not process green and red directly next to each other as they are of similar tonal value, as are purple and royal blue.

DyslexiaDistilled worked on the British Dyslexia website. Check it out and you will see how colours are separated tonally and also a pale cream background colour is used. Dyslexic people find harsh contrasts cause the letters in words to jumble up, so a pale cream background softens this contrast.

Leonie Wharton is a graphic designer at Distilled.

Picture source

Related articles:What are the web design trends for 2010?

Share this story

Close
Menu
Send this to a friend