3 Things to Keep in Mind when Designing for the Colourblind

17 Aug 2017

For those with a visual, hearing, motor or any other type of disability, navigating the web can be a difficult task. Over 15% of the world's population are affected by some form of a disability. As a designer, creating a design that is accessible to everyone can be a difficult task as there are many factors to consider. With today’s current web design trends focusing on the use of colour to present information in new and interesting ways, designers are often at risk of alienating a group of potential users, the colour blind. Making your website accessible doesn’t mean you have to sacrifice your fancy new web design. Yes of course it’s more challenging to design and might cause a few sleepless nights but it’s not impossible.

Fun fact: One of the reasons why Facebook’s branding is blue is that Mark Zuckerberg is red / green colourblind and therefore designed the website with the colour blue!

Don’t Rely on Colour

The first big no-no for accessible web design is relying on colour to convey your message. There are many reasons why you should avoid doing this when at all possible. For example if the only feedback given when a form field is entered incorrect is colour, users suffering from colourblindness would have a hard time seeing the incorrect form field.. Adding a simple symbol or icon makes it immediately clear for everyone that there is an incorrect field. It’s also good to remember that those using screen-readers won’t be able to see colour.

Consistency is Key

Consistency is one of the most important principles of design, regardless of who you are designing for. A consistent limited colour palette will go a long way in helping make your website readable for the majority of users. Every aspect of the website should be consistent, the buttons, the main navigation and general page layout. All these elements should stay consistent throughout your web site. The user shouldn’t have to re-learn each new page.

Contrast, Contrast, Contrast

The most important thing to consider when designing for the colourblind is contrast. It's important to make sure that your contrasting colours really do contrast each other. Colours that look great to the average person may be too similar or be too contrasting to someone with colour blindness. For example make sure your main call to action or primary button doesn’t blend into the background if someone can’t see the colour red. There are many online tools which can show you what your website looks like to those with colourblindness. You can see them here. Google can also penalise a site that doesn’t have enough contrast between background colours and text colour. It can see low contrast ratios as an attempt at cloaking keywords.

Hopefully you’ve learned a little a thing or two about designing for the colourblind. Ultimately, websites aren’t just meant to look good, they are meant to be easy to use for everyone including the colour blind. So If you need a team of expert designers that will craft you a bespoke website that is accessible to all of your potential users why not get in touch with one of our strategists today. 

Sean McCooey

Get This Content in Your Inbox