Colour Blindness and Web Design - What You Need to KnowAs a web designer blessed with colour blindness I often find that other people remark on my choice of colours and ask "what was I thinking?"
While the colour schemes look perfectly fine to my eyes, they can be contrasting or too strong for "normal" eyes. One example I can think of is my photography portfolio (which is no longer online, instead visit my photo galleries. In my original portfolio, I created a brown/gold/grey palette. I was quite pleased with it until a friend commented that blue and green didn't go together, to which I replied: "There is no blue...".
What Is Colour Blindness?
Colour blindness is a common disorder that affects a large proportion of the population. It is critical for a web designer to design websites that are accessible to everyone, including individuals with colour vision deficits. Millions of people worldwide are colourblind. As a web designer, it is critical to understand how to construct inclusive and accessible websites.
It is important to understand the many types of colour vision deficits before building a website that is accessible to persons with colour blindness. Red-green colour blindness is the most frequent kind, affecting around 8% of men and 0.5% of women of Northern European heritage. Blue-yellow colour blindness and complete colour blindness are two additional types. Understanding the various types allows you to make informed colour decisions and guarantee that your website is accessible to all people.
The Ishihara test for colour-blindness shows a random pattern of dots and depending on colour blindness you will either see a number, a pattern or nothing. In my case, I have an anomalous form of protan, commonly called red-green colour-blind.
My Website Colour Palettes
Since my colour palette didn't go down too well I had a look on the web and found a colour-blindness filter which reads in a website and produces a filtered version based on various colour blindness defects. When I showed my friends the filtered version - the version where I could see no difference between the real version and the filtered version - and they could see what I saw, they then all said that my choice of colours was good after all. It's just that I saw the colours wrong.
The two screenshots below show my first version (left) and how I see the colours (right).
I cannot see any difference between the two, but apparently, the links on the left-hand side are blue, not grey and the logo and heading are bright green, not gold.
Colour Blindness Web Design Tips
Because colour blindness impairs people's capacity to see hues and degrees of colours, designing with colour blindness in mind is more difficult than simply utilising black and white. These tips will make your work more accessible to all readers, not just those who are colourblind.
Use High Contrast Colours
When building a website, employ high-contrast colours to guarantee that colourblind people can readily distinguish between different items on the page. This entails utilising colours that contrast sharply, such as black and white or dark blue and light yellow. Avoid using colours with similar colours, such as red and green, as they can be difficult for colourblind people to distinguish. You may ensure that your website is accessible to all viewers, regardless of their colour vision, by selecting high-contrast colours.
Avoid Relying Solely on Colour to Convey Information
When designing a website, keep in mind that not all users will be able to tell the difference between different colours. This is especially vital for presenting critical information, such as error messages or calls to action. Consider using other visual clues, such as icons or text, instead of just colour to convey this information. This ensures that all users, regardless of colour vision, can understand and interact with your website.
Use Patterns and Textures to Differentiate Elements
When designing for colourblind visitors, use patterns and textures to differentiate between different elements on your website. Using different textures for buttons or patterns to differentiate across different sections of your website can be an examples of this. By using these visual signals, you can ensure that all users, regardless of colour vision, can browse your website effortlessly and efficiently. In addition, colourblindness simulators should be used to test your website to guarantee that it is accessible to all people.
Test your Website for Accessibility
Testing your website for accessibility is crucial to ensure that all users, including those with colour blindness, can easily navigate and use your website. There are various tools and simulators available online that can help you test your website's accessibility, such as the WebAIM Color Contrast Checker and the Color Oracle simulator . By testing your website and making necessary adjustments, you can create a more inclusive and accessible online experience for all users.
Additional Resources for Colour Blindness and Web Design
Although there are good guidelines on developing websites and how to design web accessible pages for the colour-blind as well as tools for evaluating how colour-blind people will see various web design graphics, there does not seem to be any resources for colour-blind web designers who need a filter to see how the palette looks to a normal person.
This is a great shame, as I could do without this handicap especially seeing as I have enough trouble with a lack of colour creativity in the first place!
If you have any colour-blind resources that could be of help, please let me know and I'll gladly put up some links.
