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
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. I created a brown/gold/grey palette in my original portfolio. 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 important 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 important to understand how to construct inclusive and accessible websites.
Understanding the many types of colour vision deficits is important before building a website accessible to persons with colour blindness. Red-green colour blindness is the most frequent, 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 everyone.
The Ishihara test for colourblindness shows a random pattern of dots, and depending on colourblindness you will either see a number, a pattern or nothing. In my case, I have a strange form of protein, commonly called red-green colourblind.
My Website Colour Palettes
Since my colour palette didn't go down too well, I had a look on the web and found a colourblindness 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 all said that my choice of colours was good. 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 using 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 using sharply contrasting colours, 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 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 example. Using these visual signals ensures 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 it is accessible to everyone.
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. Testing your website and making necessary adjustments 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 colourblind as well as tools for evaluating how colourblind people will see various web design graphics, there does not seem to be any resources for colourblind web designers who need a filter to see how the palette looks to a normal person.
This is a great shame, as I could have done without this handicap, especially as I had enough trouble with a lack of colour creativity in the first place!
If you have any colourblind resources that could help, please let me know, and I'll gladly put up some links.
