”In visual perception, a colour is almost never seen as it really is […] This fact makes colour the most relative medium in art.” — Joseph Alberts, Interaction of Color, 1963 -
Remember the dress from 5 or 6 years ago… you know the one.. Was it blue and black or was it white and gold?
This little colour illusion reminded us all that colour is almost never seen as it really is, which is precisely why we should never use colour alone to distinguish something.
“We all see colour slightly differently and our perception is literally ‘coloured’ by the context in which we view it, such as a device’s screen and the surrounding environment.”
We use colours everywhere in our everyday life; whether we are wearing the rainbow with Pride, creating simple presentations and documents, designing websites and mobile apps, or designing complex multi-media ad campaigns, but we don’t always understand colour theory to it’s fullest.
Like it or not, the use of colour and the ways in which colours interact with each other has an emotional impact on how someone views a particular product, service or brand.
For accessibility, we as designers know that we need a certain contrast ratio in order for people to be able to use our sites, but how many of us really understand why or how that ratio is created?
It is up to us as designers to do the work and design in a way that makes the rainbow visible to all and it starts by understanding colour theory and colour blindness.
What is Colour-blindness?
Colour-blindness is the inability to distinguish the differences between certain colours (red, green, blue) and affects men (8%) more than women (0.5%). The most common type is red-green color-blindness, where red and green are seen as the same color.
Here are some illustrations of the 8 most common forms of colour-blindness:
8 Steps for Inclusive Colourful Designs
Step 1: Design in greyscale to ensure colour is not the only way to identify or distinguish information.
Step 2: Make text and objects large enough to be readable and legible
Step 3: Use a Barrier-free Colour palette
Step 4: Avoid using pure red, use vermilion or orange instead
Step 5: Avoid using pure green, use bluish-green instead
Step 6: Avoid combinations of colours with low saturations or low brightness
Step 7: Avoid situations where text and objects are obscured with the background
Step 8: Keep the number of colours to a minimum
Testing for colour-blindness
Step 1: Test if you are colour-blind Take the online test http://www.color-blindness.com/ishihara-38-plates-cvd-test/
Step 2: Test if your computer is Colour-blind Your computer and monitor may not display the colors accurately. Learn how to test yourr computer. http://www.colormatters.com/color-blind-computers
Step 3: Test your designs for colour contrast and visibility.
In summary
The world is a beautiful and colourful place. Let’s make sure everyone gets to enjoy the rainbow in all it’s beauty.
