2015 Oct 15

When it comes to branding your company and designing your website, colour choices are always a huge consideration. Psychologically we know that different colours can convey different meanings and feelings, and it can sometimes make or break a design.

While much time is often spent finding the right shade of red, blue, green, etc., colour accessibility is often forgotten about.

A large percentage of our population, more so affecting men than women, have various types of colour blindness. At a very high level the most common type of colour blindness is red-green, but some people have blue-yellow, or even complete colour blindness. Colour Blind Awareness reports that approximately 1 in 12 men and 1 in 200 women in the world have a colour vision deficiency. With those statistics, chances are you know someone who has a varying degree of colour blindness.

Sir Tim Berners-Lee, the founder of the World Wide Web, was quoted as saying “The power of the Web is in its universality. Access by anyone regardless of disability is an essential aspect.” This is why the Web Content Accessibility Guidelines Working Group (WCAG WG) included a minimum colour contrast ratio as a rule in their guidelines. WCAG 2.0 Level AA Success Criteria 1.4.3 - Contrast (Minimum) dictates that there must be a minimum contrast ratio of 4.5:1 between text and its background. WCAG 2.0 Level AAA Success Criteria 1.4.6 - Contrast (Enhanced) takes contrast further with a minimum ratio of 7:1. For Ontario organizations that must abide by the Accessibility for Ontarians with Disability Act (AODA), you must meet the minimum contrast ratio of 4.5:1 for your web content.

While some users may still require additional Assistive Technology to help read the text, meeting these ratios could drastically improve the readability of your content for a lot of users.

Examples of colour deficiencies

The examples below show how different colour deficiencies can change the colours of a website. In this case I chose a section of the Industrial Jobs page which includes multiple coloured blocks and photos. The examples were created using a colour blindness simulator.

No filter applied, as designed
No colour blindness
Protanopia
Protanopia - Red-green colour blindness

 

Protanomaly
Protanomaly - Red-green colour blindness
Deuteranopia
Deuteranopia - Sub-type of red-green colour blindness
Deuteranomaly
Deuteranomaly - Sub-type of red-green colour blindness
Tritanopia
Tritanopia - Blue-yellow colour blindness
Tritanomaly
Tritanomaly - Blue-yellow colour blindness
Achromatopsia
Achromatopsia - Complete colour blindness
Achromatomaly
Achromatomaly - Reduced colour perception

Do you have a colour deficiency?

Many people may go through life not knowing that they have a type of colour blindness. Colour blindess can also develop as you age, especially for men. You may have already taken a colour blindness test with your Optometrist such as the Farnsworth-Munsell Colour Vision Test. The test can relatively quickly identify colour deficiencies.

The Optometrist may give you a Farnsworth-Munsell Colour Vision Test which are coloured discs set in a random order. Your task is to arrange them by hue order.

You may have also seen the Ishihara Colour Vision Test circulating online from time to time. This test typically shows you a group of circles with numbers in them. The entire circle is made up of smaller, coloured circles, with the numbers made up of differently coloured circles. If you have a colour deficiency, some of these numbers may not be visible to you.

The Ishihara Colour Vision Test typically includes coloured circles with numbers within them. The circles are made up of smaller, coloured circles, while the numbers within are made up of differently coloured circles.

Konan Medical's ColorDX Widget lets you test yourself. Try it out! I decided to test some of my coworkers in the Industrial office. Keep in mind that this test could be affected by things like environmental lighting, monitor contrast levels, etc., but the results were interesting. I've arranged the ages of my coworkers into common age groups because, you know, I still have to work with them!

Ages 18-24
Sex Score
Male 8/8
Male 8/8
Ages 25-34
Sex Score
Male 8/8
Male 8/8
Male 8/8
Female 8/8
Female 8/8
Male 8/8
Ages 35-44
Sex Score
Female 8/8
Male 8/8
Male 1/8
Female 8/8
Male 7/8

In the small sample size of the Industrial office, the testing concluded that two males within the 35-44 age bracket have a colour vision deficiency. One male failed 7 of 8 tests, while the other failed 1 of 8 tests. These results certainly fall within the global statistics for men. All women tested were able to identify the numbers in all 8 tests.

Testing colours

The WCAG provides a minimum standard we must meet, and many tools exist for us to test our colours before releasing them into the wild. My go-to tool for testing colour contrast is The Paciello Group's Colour Contrast Analyser. It's available for Windows and Mac and provides an eye dropper tool for quick testing, but you can also enter HEX codes for exact colour testing. You'll get a quick report about your contrast ratio and pass/fail evaluations for WCAG Level AA and Level AAA. If your chosen colours don't meet the guidelines there are also tools, like Color Safe, to help you choose different shades of your colour in order to meet or exceed the guidelines.

What does this all mean?

It means that when we're working on branding and web design we need to consider the large global population of users who have a colour vision deficiency. Choosing accessible colours is one step in broadening your web site's audience and helping everyone access your service or product with ease.