Accessibility

Accessible text requirements

When it comes to accessibility, the Web Content Accessibility Guidelines (WCAG) 2.1 provide several guidelines related to typography.

Our default text styles 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.

WCAG guidelines

1.4.3 Contrast (Minimum)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.

1.4.3 Resizes text

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

1.4.5 Images of text

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for certain situations.

1.3.2 Meaningful Sequence

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)

1.4.12 Text spacing

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

• line height (line spacing) to at least 1.5 times the font size
• spacing following paragraphs to at least 2 times the font size
• letter spacing (tracking) to at least 0.12 times the font size
• word spacing to at least 0.16 times the font size.

1.4.10 Reflow

Content can be presented without loss of information or functionality, and without requiring scrolling in 2 dimensions for vertical scrolling content at a width equivalent to 320 CSS pixels; horizontal scrolling content at a height equivalent to 256 CSS pixels.