Accessibility

Accessible colour requirements

Our default colours have already been designed to meet accessibility requirements however keep these considerations in mind if you're modifying the Design System or creating a custom component.

You must make sure that the contrast ratio of text and interactive elements in your service meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).

WCAG Guideline 1.4.3 Contrast (Minimum)

Text and images should have sufficient contrast with their background colour to ensure that they can be easily read by people with visual impairments.

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text

Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.

Incidental

Text or images of text that are part of an inactive user interface component, that are pure decoration, that aren't visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes

Text that is part of a logo or brand name has no contrast requirement.

WCAG Guideline 1.4.1 Use of Colour

Colour shouldn't be the only means of conveying important information or indicating an action. For example, if the only way to know if a button is clickable is by its colour, this would not meet this guideline. Text or other visual cues should also be provided to ensure that people with colour blindness or low vision can understand the content.

WCAG Guideline 1.4.11 Non-text Contrast

Recommends providing sufficient contrast for non-text elements like icons or charts. For example, using light grey icons on a white background wouldn't meet this guideline.

Colour Consistency

Consistent use of colour throughout a website or application can help users with visual impairments to navigate and understand the content more easily. Colour consistency isn't a specific WCAG guideline however, consistency is an important principle in creating accessible designs. Consistent use of colour, typography, layout, and other design elements throughout a website or application can help users with visual impairments to navigate and understand the content more easily.

This principle is emphasised in WCAG's success criterion 1.3.5 Identify Input Purpose, which requires consistency in the presentation of input fields and instructions throughout a website or application. Additionally, success criterion 3.2.3 Consistent Navigation requires that navigational mechanisms be consistent throughout the website or application. While consistency isn't a specific guideline, it's an important aspect of accessible design and can be applied to multiple WCAG guidelines.