Colours and colour contrast

Psychology and colour

Colour contrast makes up the majority of WCAG guidance around the use of colour. However, it’s also worth considering the psychological impact colour can have on some users:

• People on the autistic spectrum can experience sensitivity to sensory information, which includes bright, contrasting colours.
• Those with dyslexia can find text on a pure white (#FFFFFF) background very dazzling. They might also find text on a patterned, or textured, background noisy.

Colour vision deficiency

In the UK, 4.5% of people live with some form of colour vision deficiency (CVD). This makes it difficult for them to identify and distinguish between certain colours. The most common forms of CVD are those that affect the perception of red and green, such as deuteranomoly and protanomoly. There are other, more severe variants including monochromacy, sometimes called ‘total colour blindness’ (where someone is unable to see any colour at all).

Colour contrast

Colour contrast is about using shades that provide enough variation between the content and background for anyone with colour vision impairments.

Insufficient colour contrast in our designs can have a negative impact on how someone sees and perceives information, for a number of reasons beyond those with CVD:

• Ageing impacts our ability to perceive colour.
• Device differences – size, resolution and contrast all vary depending which device users are on.
• Bright conditions such as looking at a device under sunlight, can reduce colour contrast.
• Certain medications or exposure to certain chemicals can affect or cause damage to the eye.

Colour contrast rules don’t apply to everything. It’s just the really essential bits of content that need to have enough distinction.

Colour contrast ratio rules

A colour contrast ratio refers to the contrast of an object (such as text) against a background colour. The ratio is written as object : background.

Often we need to consider more than one contrast ratio per element. For example, for buttons, there are two contrast ratios we need to check:

1. The text within the button (the object) against the colour of the button (the background).
2. The colour of the button (now the object) against the background it sits on.

[Will create a visual to show this]

Rules for text

• Large text (at least 24px, or bold and at least 19px)
  Should have a minimum contrast ratio of 3:1
• Small text (less than 24px, except for the bold rule outlined above)
  Should have a minimum contrast ratio of 4.5:1

Rules for graphic objects and UI components

Graphic objects and UI components are interactive elements, such as a form field border or a button shape.

These need to have a minimum contrast ratio of 3:1

It’s not always easy to identify whether a graphic object or UI component needs to comply with these colour contrast rules. We need to assess whether the element serves a functional (ie. not a purely decorative) purpose – if it does, then it needs to meet the minimum colour contrast requirement of 3:1.

Exclusions to the rules

Graphic and text elements are excluded from the rules, provided that they meet one of the following criteria:

• The text is within a photo, and this text is not required to communicate the key context or purpose – if any clarity is needed, it could be provided in the alt-text
• The element is purely decorative, and serves no functional purpose.
• The text forms part of a logo or brand name.