2 minute read

WCAG 1.4.8: Visual Presentation (Level AAA)

Ever found yourself trying to read an article but you’re stuck because the text is so cramped and small that it feels like a challenge just to get through a single paragraph?

For people with visual impairments or those who struggle with focus, being able to control how text is presented is key to understanding the content. Visual Presentation ensures users can adjust text size, spacing, and layout to suit their needs.

Who this impacts

  • People with visual impairments: Customizable text size and spacing are essential for making content readable.
  • People with cognitive impairments: Clear spacing and control over how content is presented can reduce cognitive overload and improve focus.
  • People using mobile devices: On smaller screens, being able to adjust text size and layout is crucial for readability.
  • Everyone: Offering control over text appearance improves readability for everyone, especially in challenging environments like glare or low light.

How to meet visual presentation

  1. Allow customizable line spacing and text size: Ensure that users can adjust line height, letter spacing, and font size without breaking the layout or losing content.
  2. Provide control over foreground and background colors: Allow users to modify the text and background colors for better contrast and readability.
  3. Ensure text remains visible when customized: Make sure that increasing text size or adjusting colors doesn’t cause any overlap, content loss, or readability issues.
  4. Test with different settings: Regularly check your content with various text size, spacing, and color combinations to ensure it remains accessible and readable.

Practical example

Catbook lets users increase the size of the text, adjust the line height, and tweak letter spacing. Even with these changes, the text remains clear and readable, with no overlap or missing content, so reading about Jeeves’ latest antics is always easy on the eyes.

Exceptions

Content like infographics or complex charts that cannot be reformatted without losing meaning are exempt from this requirement.

Top tips

  • Prioritize flexibility: Design your website to adjust smoothly when users change text size, spacing, or layout preferences.
  • Test for edge cases: Check how your text behaves with large font sizes, increased spacing, or different letter spacing.
  • Make customization easy: Include simple, intuitive controls for users to adjust how they view the text on your website.

Further reading

Previous articleNext article
Back to top