Making your Site More Accessible to Visually Impaired People

It goes without saying: The more people who can access and enjoy your work the better. If your work is visually accessible then more people can see what you have to say and critique your work so it improves.

I’m currently redesigning our website so that it is more accesible for people who are visually impaired. This includes adding alt text and bigger fonts. But I wanted to go a step further and create strong visuals which can be accessed by everyone.

I’ve done a lot of research into resources which can help make your work more accessible to people with a variety of vision impairments.


Coloursafe

Coloursafe is a fantastic resourse which checks whether or not your design, font and colour scheme match the ‘WCAG’ (Web Content Accessibility Guidelines) standards for vision impairments. Simply enter the text and specifications you want to use and it will suggest alternative font colours if your work doesn’t meet the requirements.

Example of Coloursafe and suggested pallettes which meet WCAG standards

Example of Coloursafe and suggested pallettes which meet WCAG standards

No Coffee Chrome Extension

No Coffee is an extension on google chrome which allows you to view any website from the perspective of different vision impairments. It covers a range of conditions from different types of colour blindness (such as Deuteranomaly and Tritanopia) to Floaters, retinal detachments and glaucoma.

Below was out homepage from a variety of perspectives:

Accessibility and Usability at Penn State

The accessibility and usability at Penn State site covers lots of information about colour contrasts on web pages. It conducts ‘contrast tests’ to show you which combinations of colours are better than others for maximum usability.

Basic Web Design For Vision Impairments

Tutsplus has a list of websites which are designed well for people with vision impairments. It also a few simulations of different websites from the perspective of people with different vision impairments.

Simulation of Google homepage to someone with blurred vision (courtesy of Tutsplus)

Simulation of Google homepage to someone with blurred vision (courtesy of Tutsplus)

Redesigning your Home for Vision Impairments

This blog post from vision aware is more about home adjustments for vision impairments, but has lots of useful information on colour contrasts and 3D design.

Material Design’s Accessibility Guide

Material Design features a large database of appropriate materials, colours, type and sounds to use on a variety of design mediums. It’s a great resource and touches on many areas of design.

Sophia Luu