Website accessibility for colour blindness

Website accessibility is about making the web accessible to all users. The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published to help web designers meet accessibility standards. The guidelines are grouped into four principles; Perceivable, Operable, Understandable, and Robust.

Disabilities are not just limited to physical issues but can also include conceptual, economic cultural, and social. 


“Website accessibility is about making the web accessible to all users.”


WCAG 2.0 is divided into three conformance levels (A-AA-AAA) which become more and more strict with each level. But why is compliance important? Below is an example of just one type of disability; colour blindness. Colour blindness affects the way that colour is perceived and effects an estimated 8% of males and less than 1% of females. The most common type of deficiency is red-green colour blindness, however there is also blue-yellow colour blindness, and complete colour blindness.

Visual examples of Normal Vision, Deuteranopia and Tritanopia

To accomodate a user who is colour blind we need to ensure that the colour palette selected creates visual differentiation between text and backgrounds so that website content is readable. If website visitors cannot read your text, or differentiate buttons which can be clicked on then they will not be able to learn about your business.

For a website to be AAA compliant the contrast ratio between backgrounds and text should be at least 3:1. There are a huge range of web tools available which will help you select a contrast which meets either AAA or AA compliance, one such tool is WebAIM

Here we have shown our Fish Vision colour palette and how different combinations of colours can meet or fail each level of compliance.

Colour palette combinations which meet and fail WCAG compliance


Get in touch with the team today to discuss how we can make your website more accessible.


Get in Touch