Upon review of my previous chosen colour palette, we concluded that it had a ‘clinical’ feel to it. So I decided to explore adding different colour ranges to the palette. I also wanted to take into consideration, accessibility when choosing my palette. Before selecting another, I decided to research the topic of colour contrast, as it is not something I have actively practised in a project yet.

Colour Contrast

Colour contrast between text and background is an important element to consider when designing for digital screens. The contrast between colours affects some people’s ability to perceive the information (in other words to be able to receive the information visually).

Everyone who can see sees things in different ways. The human eye and brain is very good at distinguishing shapes, patterns and colours generally, but for a significant number of people there can be difficulties distinguishing some shades, or some colours. This is broadly referred to as colour blindness, however, that may be misleading, as some people can see certain colours. ‘Colour Vision Deficiency’ is a more thoughtful approach.

How should we address colour contrast through our digital designs?

The two main issues related to colour contrast are:

1. Anything that is indicated by colour needs to have a secondary way for it to be distinguished - For example it is no good saying “Use the green button if you agree or the red button if you don’t” by itself. I learned this during my time as a UX writer with Rapid7.
2. For text to be readable or other elements to be distinguishable, they need to have sufficient contrast with the background.

It is important to remember that these factors are not just for people with a colour vision deficiency, it affects everyone in different ways:

• The amount of light that reaches the back of the eye reduces as a natural part of ageing
• Screens vary widely in size, resolution and contrast
• Reading in bright conditions is much harder because contrast is lower.

This is why it is very important to check out your colour contrast before applying a colour palette to your work.

How to check your Colour Contrast…

I have always found that the Web Content Accessibility Guidelines (WCAG) showcases perfect guidelines for accessibility throughout projects. There is a great section on recommend minimum levels for colour contrast between text and background, based on a mathematical formula. Ideally, we should be aiming to achieve a Level AAA. Level AAA is the highest possible conformance level in WCAG, and as a result holds organisations to the highest standard of accessibility.

There are tools that can be used to measure colour contrast, including a plug-in on Figma.