Allow User Customization of Text Visual Presentation

Disabilities Affected: Cognitive, Visual

Success Criterion: 1.4.8

Level: AAA

For the visual presentation of blocks of text, a mechanism must be available to achieve all of the following (without loss of content/functionality):

Foreground and background colors can be selected by the user.
Width is no more than 80 characters or glyphs (40 for CJK).
Text is not justified (aligned to both left and right margins).
Line spacing (leading) is at least 1.5 times within paragraphs, and paragraph spacing is at least 1.5 times the line spacing.
Text can be resized without assistive technology up to 200 percent so the user doesn’t have to scroll horizontally to read a line of text in a full-screen window.

Why It Matters

Users with low vision or cognitive disabilities like dyslexia often benefit greatly from being able to customize text presentation (colors, spacing, line width) to improve readability. Justified text creates uneven spacing (‘rivers of white’) that can be difficult to track. Limited line width prevents long eye sweeps. Increased line/paragraph spacing improves tracking between lines. Ensuring text reflows when resized (related to 1.4.4 and 1.4.10) is crucial.

Fixing the Issue

This typically requires providing user controls or ensuring the page’s CSS doesn’t prevent user overrides.

Colors: Avoid hardcoding colors in ways that override user stylesheet settings (use standard CSS properties). Consider providing theme options (light/dark/high-contrast).
Width: Use fluid layouts (max-width in relative units like em) for text blocks rather than fixed pixel widths. Aim for around 60-75 characters per line in the default view.
Justification: Use text-align: left; (or right for RTL languages) instead of text-align: justify;.
Spacing: Set line-height to at least 1.5 (unitless) and ensure paragraph margins (margin-bottom) are appropriately larger (e.g., 1.5em).
Resize: Use responsive design and relative units (rem, em, %) for font sizes and containers to allow text resizing and reflow up to 200% without horizontal scrolling (overlaps with 1.4.4 / 1.4.10). Providing explicit controls (e.g., via JavaScript) for users to change these settings directly offers the best experience for AAA.

Good Code Example

CSS demonstrating good default text styling for AAA

Markup

body {
  font-size: 100%; /* Base for relative units */
  /* Allow user color selection (don't force black on white if user agent overrides) */
}

.main-text-block {
  max-width: 75ch; /* Limit width based on characters (ch unit) or use em/rem */
  /* Or: max-width: 40em; */
  margin-left: auto; /* Center block if needed */
  margin-right: auto;

  line-height: 1.6; /* Line spacing >= 1.5 */
  text-align: left; /* Avoid justification */
  margin-bottom: 1.5em; /* Default paragraph spacing (can be on <p>) */
}
.main-text-block p {
   margin-bottom: 1.6em; /* Paragraph spacing >= line-height */
   /* font-size: 1rem; /* Use relative units */ */
}

/* Styling assumes responsive design handles reflow (WCAG 1.4.10) */

Bad Code Example

CSS that hinders readability and customization:

Markup

.bad-text-block {
  width: 900px; /* Fixed, potentially very wide width */
  text-align: justify; /* Justified text creates rivers of white */
  line-height: 1.2; /* Insufficient line spacing */
  color: #333 !important; /* !important overrides user styles */
  background-color: #fff !important;
  font-size: 12px; /* Fixed font size hinders resizing */
}

.bad-text-block p {
  margin-bottom: 0.5em; /* Insufficient paragraph spacing */
}

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult