1.4.8 Visual Presentation

Updated on October 8, 2025

Goal

Provide users with the ability to customize visual presentation — such as text color, background color, line spacing, and paragraph width — to improve readability and reduce visual strain, especially for people with low vision, dyslexia, or cognitive disabilities.

Key Points

  • Users must be able to adjust foreground and background colors.
  • Line width should be no more than 80 characters (40 for CJK languages).
  • Text must not require horizontal scrolling at 320px viewport width.
  • Line spacing, paragraph spacing, and text alignment should support readability:
    • Line height (line spacing): at least 1.5× font size
    • Paragraph spacing: at least 1.5× line spacing
    • No full justification (left-aligned text preferred)
  • Helps users with low vision, dyslexia, and focus difficulties.

Short Summary

Ensure users can visually customize and comfortably read content without losing structure or functionality — improving clarity, focus, and accessibility.

Example Issues and Fixes

Poor Readability and Fixed Colors

Fail
<div class="flex w-full flex-col gap-8 p-8">
  <p style="color: #555; background: #333; text-align: justify; padding: 16px;">Accessibility makes web content usable for everyone, regardless of ability.</p>
</div>

Accessibility makes web content usable for everyone, regardless of ability.

Pass
<div class="flex w-full flex-col gap-8 p-8">
  <p class="max-w-prose rounded bg-gray-100 p-4 text-left leading-relaxed text-gray-900">Accessibility makes web content usable for everyone, regardless of ability.</p>
</div>

Accessibility makes web content usable for everyone, regardless of ability.

Wide Text Blocks and Tight Lines

Fail
<div class="flex w-full flex-col gap-8 p-8">
  <p style="line-height:1; max-width:none;">
    Long lines of text are hard to read and can cause eye strain for users with low vision or dyslexia.
  </p>
</div>

Long lines of text are hard to read and can cause eye strain for users with low vision or dyslexia.

Pass
<div class="flex w-full flex-col gap-8 p-8">
  <p class="max-w-prose leading-7 text-gray-800">
    Shorter line lengths and generous line spacing improve focus and reduce fatigue.
  </p>
</div>

Shorter line lengths and generous line spacing improve focus and reduce fatigue.

Quick Checklist

  • Foreground and background colors can be customized.
  • Line width is ≤ 80 characters (40 for CJK).
  • Line height ≥ 1.5×, paragraph spacing ≥ 1.5× line spacing.
  • No full justification — left-aligned text preferred.
  • No horizontal scrolling required at 320px viewport width.
  • Text remains readable and adaptable to user styling or browser zoom.

Next

Leave a Reply

Your email address will not be published. Required fields are marked *