There’s a huge amount of articles out there on fabulous colour combinations and graphics tips for website design. However, there’s not much useful information available on how to design a great looking, easy to navigate website that is accessible for those with a vision impairment or cognitive disability that leads to a satisfied user experience.
Media Access Australia believes that by following a few simple rules, your website can be designed to not only be accessible for vision impaired people or those with a cognitive condition, but provide a great user experience for people of all abilities.
“While colour is an important aspect of achieving an attractive visual design, users won’t care how attractive your colour scheme is if they can’t perceive your content properly,” says User Experience Designer, Heidi Laidler.
Colour is subjective and appears slightly different to each user. A user’s perception of colour can vary based on impairment, like individuals with colour vision deficiency, as well as context, such as people using a mobile app in an outdoor sunny area. So it’s essential to select colours with a high contrast to each other, in order to design an inclusive experience for all users.
Some helpful tools for colour choices
Adobe Colour CC is often used by designers to select colours for their designs, yet it does not offer any information regarding the accessibility or contrast of colours. So it’s best used in combination with The Paciello Group’s Colour Contrast Analyser, to ensure that your colour scheme is both visually pleasing and accessible for all users.
There’s also a very useful free tool which can be used to find and select accessible colours for your design – Colour Safe. This allows you to select your font styling and background colour, and suggests potential accessible colours to suit your design.
Additional things to consider regarding colour
Be cautious of using gradients or images as a background, behind text. But if you are using a gradient, ensure that all colours in the spectrum of the gradient have sufficient contrast with the colour of your text.
When using an image, note that it should not contain too much detail, which may make the text difficult to read. If the image is quite detailed, either consider using a different image or consider blurring the image slightly. You must also check that each colour within the image, that sits behind the text, has sufficient contrast with your text colour. Often, it is best to use a semi-opaque layer between the image and the text to improve the colour contrast.
Other important things to be aware of
Avoid strobing, or at least limit it. There should be no more than three flashes per second of an image (as per the WCAG 2.0 guidelines) as a higher frequency than that puts a person with photosensitive epilepsy at risk of a seizure. Plus, fast flashing images are also just plain annoying for many people.
You should also try to avoid animated image files (gifs) embedded in your website where possible, because they can cause distraction and confusion for people with or without a cognitive disability. And finally, be aware that visual sliders or carousels at the top of your website are all very well and good (and extremely popular too) yet they need to be able to be paused – again to avoid distraction and annoyance for site visitors of all abilities.
Media Access Australia offers a range of consulting services and training to help your organisation attain optimal digital accessibility reach and compliance. MAA can assist with usability testing, web access audits, digital accessibility maturity assessments, document remediation, accessibility training and more. You can contact the Digital Accessibility Services team for more information.
