How to test your design for visual accessibility

In a recent survey, 18% of designers admitted they didn't know how to test their work for accessibility1.

We've compiled a list of recommended tools, all of which we have used ourselves in our design work.

With an ageing population and large proportions of the world having some form of visual deficiency, it makes designing for accessibility a top design consideration.
Understanding the design principles for accessibility, from how to design for people with colour blindness, to ensuring that your interface is still usable by those with failing eyesight is important. Being able to test your design – for free - before you send it to the printers or hit the commit button is equally as important.

Do you have any other tools that you use, or would recommend? Drop them in the comments section below.

(We should quickly mention that we haven’t been paid to mention these, they are just our recommendation)

Colour Blindness

Adobe Photoshop and Illustrator

How to use photoshop and illustrator to proof for colour blindness At some point, most designs go through either Photoshop or Illustrator. The proofing function means you can quickly see what it will look like for the two most common forms of colour blindness, Protanopia and Deuteranopia.

How to use it:
Convert your document to RGB – it gives a more accurate representation.
Go to: View > Proof Setup > Color Blindness
Select either Protanopia for Red blindness and Deuteranopia for Green blindness.
Toggle ⌘ or Ctrl + Y to turn on and off color proofing.

TIP
Use split screen viewing, with one set to normal view and the other proof colours. Any amend you make to your colour palette will be quick to see.

More accessibility advice from Adobe

NoCoffee Chrome plugin

How to test a design for colour blindness, visual acuity NoCoffee plugin
This plugin is the most comprehensive of the tools we recommend. It covers visual deficiencies including low acuity, low contrast sensitivity, colour blindness, visual glare and ghosting, obstructed visual fields like glaucoma and macular degeneration. As NoCoffee is browser based, it is perfect for proofing both web and digital work.


Contrast

Snook

Test colour scheme for contrast snook.ca
Whether working on a branding project or implementing colour in a design, it is useful to safeguard your chosen colour palette for visual accessibility. Both sight deficiencies and problems that arise with age affect the effectiveness of your colour choices. As the eye ages, the ability to perceive colours with a similar contrast decreases. A popular colour combination of grey and blue, used in interface design and web design becomes very difficult to decipher with age. The viewer has great difficulty reading the design or misses elements entirely.

To quickly check if you have enough colour contrast, either enter the hex code or drag the RGB HSB sliders in the simple form. It will produce a number of outputs, the most important of which are:

  • the contrast ratio
  • if the colours are WCAG 2 (Web Content Accessibility Guidelines) compliant.

Luminosity

Luminosity Contrast Ratio Analyser

Test a design for contrast, luminosity Luminosity Contrast Ratio
The Luminosity Contrast Ratio is similar to Snook in basic functions, but it helps you by previewing the two Hex colours entered. Making it easier to tweak the colours and increase contrast ratio within the analyser.

To quickly check if you have got enough colour contrast type the hex codes into the simple form. It will produce a ratio and grade in compliance with WCAG specifications.


Type size

How to choose the right type size for large format printing

Size Calc

sizecalc.com
With all the different screens and ways people interact with design, something it can be difficult to know how big or how small you can go with type-setting.

With this simple but useful site you can quickly find out what the best type size is for a certain viewing distance.

My favourite: they even have a light years setting. Great for you space travellers.


Are there any tools that you use? Can you recommend any we've missed? Drop them in the comments section below.


This article is the fourth article in a 4 part series on visual accessibility.

Read the others here:
Print design is failing the elderly and hard of sight

Accessibility case study: New York Times Magazine redesign

A designer's guide to visual accessibility


References

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

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.