Colour contrast

Colour contrast is the cornerstone of accessibility in visual design. It most often is the determining factor in whether a design is accessible or not. In today's bite, you'll learn how to ensure sufficient contrast between colours and create more inclusive experiences that are perceivable and distinguishable by most individuals.

‍

There are various ways to describe colour, but when it comes to accessibility, we focus on systems that align with how humans perceive colour. These systems define colour using three parameters:

Hue

Hue refers to the specific colour family such as red, green, blue, or yellow.  We usually define the name of a colour based on it’s hue, such as “yellow” or “purple.”

Chroma / Saturation

Saturation indicates the intensity of colour. A colour with low saturation appears closer to grayscale or black and white, while a colour with high saturation is vibrant and vivid.

Tonal value / Lightness

Tonal value relates to the brightness or darkness of a colour. It can be understood by imagining how the colour would look in grayscale, ranging from pure white to pure black.

‍

Perceiving colour

When designing, it's crucial not to rely solely on hue or chroma for conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Approximately 5% of people have some form of colour blindness, making it challenging to differentiate between two hues, such as red and green, or yellow and blue.

Complementary colours can provide contrast, but if the saturation and tonal value of these colours are too similar, it can create an optical illusion known as colour vibration, causing discomfort and rendering the design inaccessible to some individuals.

While everyone experiences colour differently, the least variation in colour perception occurs in tonal contrast. Therefore, when designing with colour, maintaining sufficient tonal contrast is essential for accessible communication. Adequate tonal contrast can eliminate most problems with colour vibration, and can ensure that a design transcends any colour blindness.

‍

Tonal contrast

In order to design with optimal tonal contrast, think of your work in terms of greyscale.

There are numerous ways that the results can be tested:

• Switch your display to greyscale mode;
• Print your work in black & white;
• Simulate Deuteranopia or Protanopia in Adobe Photoshop with it's colour proofing feature;
• View a colour through all types of colour blindness with Whocanuse;
• Simulate eight types of colour blindness in your browser with Colour blind bookmarklet.

These tools can give you the insight to make adjustments to an image so that it can effectively communicate regardless of these conditions.

Try using Coolors Color Contrast Checker in the browser or Colorsinspo contrast checker in Adobe XD or Figma to more precisely measure the amount of tonal contrast, and verify this against accessibility standards.

‍

Tonal contrast & typography

While tonal contrast is important in all elements of a design, it is critical in typography. The minimum recommended contrast ratio is 4.5:1 for small-scale text, and 3:1 for large-scale text (WCAG 1.4.3 Contrast (Minimum)). Many people find that black text on a cream-coloured background offers the best readability, while others prefer off-white text on a black background. In any case, a colour contrast analyzer can help you ensure that there is enough difference between text and background colours.