Checklist

Sufficient color contrast

Ensure sufficient color contrast between text and background (contrast ratio > 4.50 : 1).

UI components and meaningful graphics (e.g. icons) must be distinguishable from their background (contrast ratio > 3:1).

Test color combinations

When you build custom layouts or components, test color combinations for text accessibility. You can use the Figma contrast checker or tools like WebAIM Contrast Checker.

Use on-background tokens

Always use the on-background tokens when using text on a colored or darker background, for example, buttons or text on backgrounds.

Use predefined foreground colors

Avoid using arbitrary colors for textual elements. Instead, use the dedicated foreground colors for any text or icons already provided by the Design System.

Use predefined semantic colors

Use semantic colors when using specific context such as info, success, warning & error. Always use the relevant background and on-background color pairs to maintain legible contrast ratio.

Use predefined text styles

Only use the predefined Figma text styles. These styles have been set up to ensure they meet the requirements of the hierarchy stack. Sizes, line heights and weights have been carefully considered.

Avoid text in images

Avoid overlaying text on background images as such placement of text is typically lacking enough contrast to maintain readability.

Include alt text for all images

Include alternative text (alt text) for all images and illustrations, unless they are decorative or part of a UI component.

Use captions

Write clear captions for graphs and other visual aids.

Apply meaningful hierarchy

Use appropriate heading hierarchy (H1, H2, H3, etc.) to convey document structure. Note that semantic heading tags H1-H6 and heading styles can be used to both convert structure and design.

Ensure logical reading order

Ensure the content will be read by a screen reader in a logical way that doesn’t confuse or disorient users.

Clear and consistent navigation

Design clear and consistent navigation menus (provided by the Design System unless a team has build custom navigation).

Consider keyboard navigation

Ensure keyboard navigation has been considered for all interactive elements.

Use visual indicators

Don’t rely solely on color to distinguish differences in information, actions or states.

Clearly indicate elements in focus

Provide visible focus indicators for all interactive elements that receive focus.

Provide meaningful labels

Use clear and descriptive labels for form fields.

Provide helpful error messages

Provide helpful error messages and instructions to help users recover from form errors.

Use tooltips

When additional information needs to be shown or to describe an element more, make use of tooltips.

Avoid redundant placeholders

Don’t use placeholder text for form fields where it’s not necessary.

Ensure logical focus order

The focus order should match the visual flow of the content, such as from left to right and top to bottom.

Display errors at the right time

Surface error messages to the user at the right time. Write them in language the user will understand.

Use closed captions (CC)

Provide captions and transcripts for videos and audio content.

Design responsive layouts

Design responsive layouts that adapt to different screen sizes.

Use large-enough touch targets

Ensure touch targets are large enough for easy interaction.

Test on a variety of screen sizes

Test your designs on mobile devices and screen readers.