Accessibility

Accessible CTA link requirements

Keep these considerations in mind if you are modifying the Design System or creating a custom component.

WCAG guidelines

1.4.11 Non-text contrast

Visual information used to indicate states or boundaries and icons must have a contrast ratio of 3:1 against adjacent colours. This ensures that users with visual impairments can distinguish different states and boundaries.

1.4.3 Contrast (Minimum)

The text colour and the background colour of the CTA must have a contrast ratio of at least 4.5:1 for normal text. This ensures readability for users with moderate visual impairments.

2.1.1 Keyboard accessible

The CTA links must be accessible using the keyboard alone. This allows for easier navigation for users who cannot or prefer not to use a mouse.

2.4.4 Link purpose (in context)

The purpose of each CTA link should be clear from the link text alone. For example, "Sign up" and "View all" both accurately describe what the link will do. Users should not have to read or understand additional content to know what the link will do.

2.4.7 Focus visible

The CTA link must have a clear visual focus state to indicate when it has keyboard focus. This is important for users who navigate with a keyboard.