Accessible Formatting

  • Updated

Text content and breaks

Text of two or more lines should be left-aligned. This improves readability by providing a consistent starting point for each line. Avoid justified text, which results in uneven word spacing and makes it difficult to follow the text. The font size for text content should be at least 14px to ensure the text is easily readable for people with visual impairments.

If you use custom HTML, avoid multiple <br> tags to separate paragraphs. These have no semantic meaning and cannot be interpreted by screen readers. Instead, use the <p> tag to define paragraphs, and use margin and padding to specify spacing, thus ensuring a clear and accessible structure.

Spacing between text content

Digital communication must be designed so that users can adjust certain text spacing without losing content or functionality, or without text being cut off or overlapped. It's not about the author having to set these spacings in advance, but rather about the email program or browser used to read emails being robust enough to handle such adjustments by the user. This allows people with different needs to optimize the readability of text for themselves.

Specifically, the criterion refers to the ability to adjust the following text spacings:

  • Line spacing (line-height): The spacing between two consecutive lines must be able to be increased to at least 1.5 times the font size.
  • Paragraph spacing (margin): The space after a paragraph must be enlargeable to at least 2 times the font size.
  • Word spacing (word-spacing): The spacing between individual words must be able to be increased to at least 0.16 times the font size.
  • Letter spacing (letter-spacing): The distance between individual letters within a word must be enlargeable to at least 0.12 times the font size.

Buttons and links

Buttons require meaningful label text. This informs both users and screen readers about the button's function and the action it can perform. To avoid confusion, it's important that button text is clear and non-repetitive within the given context. Remember that important calls to action (e.g., "Register now" or "Learn more") should always be in text form so that users don't miss them due to blocked images.

Links convey information about their function and the associated link destination through their link text. To optimize navigation and eliminate ambiguity, link text should also be unique. Generic link texts such as “Click here” should be avoided. Additionally, it's recommended to add a title attribute to each link, which acts as a tooltip and provides additional useful information for all users.

Links should also be highlighted to visually distinguish them from normal text and improve their visibility and interaction options for people with visual impairments. This can be achieved by the following measures:

  • Underline
  • Color with sufficient contrast to the background (see Contrast for text and images)
  • Bold

It is recommended to implement at least two of the three options (underlining, coloring and bolding) to highlight links.

Contrast for text and images

Visual contrast plays a crucial role in the perceptibility of content, especially for users with visual impairments. Opt for high-contrast combinations: Choose high-contrast combinations for text and background colors, such as dark text on a light background or vice versa. Test the color contrast on different devices (mobile, desktop) to ensure readability under different lighting and screen conditions.

Specific contrast requirements for text content (minimum values):

  • Large text (at least 24px or 18.7px bold) requires a contrast ratio of at least 3:1 to the background.
  • Small text (under 24px or 18.7px bold) requires a higher contrast ratio of at least 4.5:1 to the background.

Specific contrast requirements for graphics and buttons (minimum values):

  • Information-bearing graphics, buttons and icon buttons must have a contrast ratio of at least 3:1 between the element color and the background.

There is no contrast ratio requirement for non-visible, inactive or decorative elements, as well as for brand logos.

To check the contrast ratio, you can use the WEBAIM Contrast Checker.