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)
Adobe Photoshop and Illustrator
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.
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.
NoCoffee Chrome 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.
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 Contrast Ratio Analyser
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.
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
Cornish, K. Goodman-Deane, J. Ruggeri, K. Clarkson, J. Visual accessibility in graphic design: A client-designer communication failure 2015 ↩