WCAG 1.4.8: Visual Presentation

What This Rule Means

WCAG Success Criterion 1.4.8, titled Visual Presentation, sits at Level AAA under the Perceivable principle. It applies specifically to blocks of text — meaning substantial passages of readable content, not single words, labels, or short phrases. The criterion sets five distinct requirements that must all be met simultaneously for a full pass.

First, foreground and background colors must be user-selectable. The page must either avoid specifying both colors together (leaving at least one to the browser default) or provide a mechanism that lets users choose their own color combination. Forcing a fixed color pairing — even a high-contrast one — can be harmful to readers with conditions such as Irlen syndrome or photosensitivity who need specific tints.

Second, the width of text blocks must not exceed 80 characters (or 40 characters for CJK — Chinese, Japanese, and Korean — scripts). This limit is calculated per line of rendered text, not per element width. A column that is 1200 px wide but contains short lines due to large font size may still pass, whereas a narrow column with very small text and long unbroken strings may fail.

Third, text must not be fully justified (i.e., aligned to both left and right margins simultaneously). Full justification creates uneven word spacing — sometimes called "rivers" of white space — that disrupts reading fluency for people with dyslexia or other reading differences. Left-aligned (ragged-right) text is always acceptable; centered or right-aligned text is acceptable for short passages.

Fourth, line spacing must be at least 1.5 times the font size within paragraphs, and paragraph spacing must be at least 2.25 times the font size. These minimums ensure sufficient vertical breathing room so that readers who track lines carefully do not lose their place or confuse adjacent lines.

Fifth, text must be resizable up to 200% without assistive technology and without loss of content or functionality. This differs slightly from SC 1.4.4 (Resize Text, Level AA) in that it explicitly requires this behavior for the visual presentation of blocks of text specifically, and without relying on a screen magnifier or browser zoom override — the page itself must support the scaling gracefully.

A key official exception: the requirements do not apply to captions or images of text. Text embedded in raster images cannot be resized or recolored by CSS, which is why SC 1.4.5 (Images of Text) separately discourages their use. Decorative text used purely as graphical elements is similarly excluded.

A pass requires satisfying all five sub-requirements. A failure on any single one — for example, applying text-align: justify to a long article body with no override mechanism — constitutes a failure of the criterion as a whole.

Why It Matters

Visual presentation of text has an outsized impact on readers who do not experience standard print or screen reading as effortless. The groups most directly affected by this criterion include people with dyslexia, those with low vision who rely on browser zoom rather than screen magnifiers, people with Irlen syndrome or scotopic sensitivity, individuals with cognitive disabilities that affect reading speed and comprehension, and aging users whose reading comfort has diminished over time.

According to the British Dyslexia Association, approximately 10% of the population has some degree of dyslexia, with around 4% experiencing it severely. For these users, fully justified text can create visual distortions that make reading nearly impossible. Long line lengths compound the problem by increasing the distance the eye must travel at end-of-line, raising the probability of losing track of which line comes next. Fixed color pairings that cannot be overridden prevent users from applying colored overlays or contrast schemes that they have discovered ease their reading.

For low-vision users — of whom the World Health Organization estimates there are approximately 246 million globally — the ability to resize text within the flow of the page is critical. If a layout breaks, truncates content, or hides navigation when text is scaled to 200%, these users are effectively locked out of portions of the site. They may not have access to dedicated screen magnification software, or they may prefer the more nuanced control of browser zoom settings they have personally calibrated.

Consider a concrete scenario: a user with moderate dyslexia visits an online news portal to read a long-form investigative article. The article body uses text-align: justify, a 900 px column (roughly 120 characters per line at the default font size), and a fixed dark-gray-on-white color scheme with line-height of 1.2. The user has configured their browser to prefer a sepia background but the site's CSS overrides both foreground and background, neutralizing that preference. Within two paragraphs, the uneven spacing, excessive line length, and inability to apply their preferred tint combine to make the article effectively unreadable. This is not a hypothetical edge case — it describes the default design of many major editorial websites today.

Beyond disability access, these requirements overlap with general readability best practices recognized by UX research. Sites that respect line length, spacing, and color flexibility tend to retain readers longer, reduce bounce rates, and earn better readability scores — all of which have measurable SEO and engagement implications.

Related Axe-core Rules

WCAG 1.4.8 requires manual testing. There are no axe-core automated rules that directly flag violations of this criterion. The reason is fundamental: automated tools evaluate the DOM and computed CSS styles, but they cannot determine whether the combination of color, line length, spacing, and resizing behavior produces an accessible reading experience for a human user. Each of the five sub-requirements involves contextual judgment:

• Color selectability cannot be automatically assessed because a tool can detect that both color and background-color are set, but it cannot determine whether the page provides a user-controlled override mechanism (such as a theme switcher) or whether the browser's user stylesheet is being respected. The presence of CSS custom properties, JavaScript theme toggles, or server-side preferences must be evaluated by a human tester.
• Line width (80-character limit) requires rendering the text at the user's default font size and measuring actual character counts per line. Automated tools do not reliably simulate this measurement across typefaces, font sizes, and viewport widths. A tester must visually inspect or use a character-counting overlay.
• Text justification can be partially detected — axe could theoretically flag text-align: justify — but the criterion allows justified text if a mechanism exists for the user to change it. No automated rule currently captures this nuance in axe-core 4.x.
• Line and paragraph spacing requires inspecting computed line-height and margin values in context and verifying they meet the 1.5× and 2.25× thresholds respectively. While computed styles are readable by automation, the contextual determination of whether a block qualifies as "a block of text" subject to the criterion requires human judgment.
• 200% resize without loss overlaps conceptually with axe's meta-viewport rule (which checks for user-scalable=no), but that rule addresses SC 1.4.4, not 1.4.8. A page may pass the automated meta-viewport check and still fail 1.4.8 if layout breaks at 200% zoom in ways that hide or truncate text blocks.

Because all five checks require human judgment, 1.4.8 must be audited through structured manual review procedures described in the next section.

How to Test

1. Identify text blocks on the page. Navigate to a representative content-heavy page (article, product description, terms of service, help documentation). Identify all substantial blocks of running text — paragraphs, list bodies, table cells with prose — that are subject to the criterion. Exclude image captions and decorative text.
2. Check color control. Open browser DevTools (F12) and inspect the computed styles of a text block. If both color and background-color are explicitly set by the page's CSS (not inherited from browser defaults), verify that the page provides an alternative: a theme switcher, a high-contrast mode toggle, or instructions for enabling a user stylesheet. If none exists, this sub-requirement fails. You can also temporarily force a user stylesheet in Firefox (about:config → layout.css.has-selector.enabled) or use the "Forced Colors" emulation in Chrome DevTools to observe whether the site respects system color preferences.
3. Measure line length. Use a browser extension such as "Line Length" or the axe DevTools panel's "Intelligent Guided Tests" to overlay character counts, or manually count characters in a representative long line. Alternatively, paste a line of text into a word processor and count characters. If lines consistently exceed 80 characters (or 40 for CJK) without any mechanism for the user to narrow the column, this sub-requirement fails.
4. Inspect text alignment. In DevTools, check the computed text-align value for each text block. Any value of justify on a long-form text block is a failure unless the page provides a toggle allowing users to switch to left-aligned text.
5. Verify spacing values. In DevTools, inspect the computed line-height for text blocks. If it is expressed in a unit other than a multiplier (e.g., 24px), divide it by the font-size value. The result must be ≥ 1.5. Then inspect the margin-bottom (or margin-top) of paragraph elements; divided by the font size, it must be ≥ 2.25. Values set with the !important flag that would prevent user overrides should be noted as a risk factor.
6. Test 200% resize. In the browser, set zoom to 200% (Ctrl/Cmd + "plus" key, or View → Zoom In, twice from 100%). Review all text blocks for truncation, overflow hidden by overflow: hidden, text that disappears behind other elements, or navigation that becomes inaccessible. Use Chrome DevTools Device Toolbar to simulate the zoomed viewport if needed. A failure occurs if any text content is lost or any functionality becomes unavailable.
7. Assistive technology check. With NVDA and Firefox, zoom the page to 200% and navigate through the article using the arrow keys. Verify that all text is still announced by the screen reader (content hidden via overflow: hidden after zoom may be visually truncated but still read aloud — flag this as a visual failure regardless). With VoiceOver on macOS and Safari, repeat the zoom test. These checks help confirm that zoom-related layout changes do not remove content from the accessibility tree.
8. User override simulation. In Firefox, go to Settings → General → Fonts and Colors → Colors, enable "Use my chosen colors," and set custom foreground and background colors. Navigate back to the page and verify whether the site respects or overrides these choices. Sites that use !important on color declarations will override user preferences, which is a failure of the color-selectability sub-requirement.

How to Fix

Fixed color pairing with no user control — Incorrect

<!-- Both color and background-color are hardcoded; user browser preferences are overridden -->
<style>
  .article-body {
    color: #1a1a1a;
    background-color: #ffffff;
    /* No theme switcher provided */
  }
</style>
<div class='article-body'>
  <p>Long-form article content goes here...</p>
</div>

Fixed color pairing with no user control — Correct

<!-- Uses CSS custom properties so a theme switcher or user stylesheet can override both values -->
<style>
  :root {
    --text-color: #1a1a1a;
    --bg-color: #ffffff;
  }
  [data-theme='sepia'] {
    --text-color: #3b2a1a;
    --bg-color: #f5edd6;
  }
  [data-theme='high-contrast'] {
    --text-color: #ffffff;
    --bg-color: #000000;
  }
  .article-body {
    color: var(--text-color);
    background-color: var(--bg-color);
  }
</style>
<!-- Theme switcher gives users explicit control -->
<div role='group' aria-label='Color theme'>
  <button onclick="document.documentElement.setAttribute('data-theme','default')">Default</button>
  <button onclick="document.documentElement.setAttribute('data-theme','sepia')">Sepia</button>
  <button onclick="document.documentElement.setAttribute('data-theme','high-contrast')">High Contrast</button>
</div>
<div class='article-body'>
  <p>Long-form article content goes here...</p>
</div>

Justified text with excessive line length — Incorrect

<!-- text-align: justify applied to a very wide unrestricted column -->
<style>
  .content {
    text-align: justify;
    /* No max-width constraint; lines easily exceed 80 characters */
  }
</style>
<div class='content'>
  <p>This paragraph stretches across the full width of the viewport, creating uneven word spacing that makes reading difficult for users with dyslexia or other reading differences. Each line may contain well over 100 characters.</p>
</div>

Justified text with excessive line length — Correct

<!-- Left-aligned text with a max-width that keeps lines under 80 characters -->
<style>
  .content {
    text-align: left; /* Ragged-right prevents uneven word spacing */
    max-width: 66ch;  /* ch unit approximates character width; 66ch ≈ 80 average chars */
    line-height: 1.6; /* Exceeds the 1.5× minimum */
  }
  .content p {
    margin-bottom: 2.5em; /* 2.5× font-size exceeds the 2.25× paragraph spacing minimum */
  }
</style>
<div class='content'>
  <p>This paragraph is constrained to a comfortable reading width, uses left alignment, and has generous line and paragraph spacing — satisfying three of the five sub-requirements simultaneously.</p>
</div>

Insufficient line spacing that breaks at 200% zoom — Incorrect

<!-- line-height set in pixels; does not scale with font resizing -->
<style>
  .article p {
    font-size: 16px;
    line-height: 18px; /* Only 1.125× font size — below the 1.5× requirement */
  }
</style>
<div class='article'>
  <p>When the user zooms to 200%, this text becomes 32px but line-height remains 18px, causing lines to overlap and become unreadable.</p>
</div>

Insufficient line spacing that breaks at 200% zoom — Correct

<!-- line-height as a unitless multiplier scales with any font size change -->
<style>
  .article p {
    font-size: 1rem;   /* Respects browser default font size setting */
    line-height: 1.6;  /* Unitless: always 1.6× the current font size, even when zoomed */
    margin-bottom: 2.5em; /* Scales proportionally with font size */
  }
</style>
<div class='article'>
  <p>At any zoom level or font size, this paragraph maintains correct proportional spacing because line-height is expressed as a unitless number rather than a fixed pixel value.</p>
</div>

Common Mistakes

• Setting line-height in pixels or points instead of a unitless multiplier. When users scale text or zoom the page, a pixel-based line-height stays fixed, causing lines to overlap. Always use a unitless value such as 1.6 so that spacing scales proportionally.
• Using text-align: justify on long-form body text without providing an alternative. Even when justified text looks clean on desktop at default zoom, it creates irregular word gaps for dyslexic users. Remove justification from prose blocks or add a user-facing alignment toggle.
• Setting max-width in pixels rather than character units (ch) or relative units (em). A pixel-based max-width does not adapt when users change their browser's default font size, potentially allowing lines to exceed 80 characters at smaller font sizes and leaving wasted space at larger ones.
• Declaring both color and background-color with !important on body or article elements. Using !important explicitly blocks user stylesheets from overriding colors, which is the primary mechanism through which users with photosensitivity or Irlen syndrome customize their reading environment.
• Relying on overflow: hidden on text containers without testing at 200% zoom. Containers sized in viewport units or fixed pixels will clip text when the user zooms in, hiding content entirely rather than reflowing it.
• Applying paragraph spacing only via padding rather than margin. If a parent container has overflow: hidden, bottom padding collapses visually and spacing appears absent. Use margin-bottom on paragraphs for reliable spacing.
• Setting paragraph spacing in pixels (margin-bottom: 20px) instead of em. Like line-height, pixel-based paragraph spacing does not scale with font size changes, causing paragraphs to crowd together when users choose larger base fonts in their browser settings.
• Assuming a narrow viewport automatically means short line lengths. On mobile viewports, a small font size can still produce very long lines in character count. Always verify character count per line at the device's default font size, not just by measuring column width in pixels.
• Providing a high-contrast theme toggle that only changes color contrast ratios, not color selectability. A toggle that moves from light-mode to dark-mode still specifies both foreground and background. The criterion requires that users can choose their own colors, not just pick from preset pairs. Supplement presets with a custom color picker or ensure the page respects the prefers-color-scheme and forced-colors media queries.
• Forgetting to test long-form text in scrollable containers. Text blocks inside elements with overflow: scroll or overflow: auto are often omitted from manual reviews. These containers have their own width constraints that may cause line lengths or zoom behavior to differ from the main document flow.

Relation to Turkey's Accessibility Regulations

Turkey's Presidential Circular No. 2025/10, published in the Official Gazette No. 32933 on June 21, 2025, establishes mandatory digital accessibility requirements that directly reference WCAG 2.1 (with strong alignment to WCAG 2.2 best practices). The Circular creates enforceable obligations for a broad range of entity types operating in Turkey, including public institutions and government bodies at all levels, e-commerce platforms, banks and financial services providers, hospitals and private healthcare institutions, telecom operators with 200,000 or more subscribers, travel agencies, private transport companies, and private schools authorized by the Ministry of National Education.

WCAG 1.4.8 is a Level AAA criterion, which means the Circular does not mandate it as a minimum legal threshold — the baseline legal requirement is generally WCAG Level AA conformance. However, Level AAA criteria such as Visual Presentation carry significant practical and reputational weight for Turkish organizations for several reasons.

First, public institutions and large private-sector entities covered by the Circular are expected to demonstrate progressive improvement in accessibility over time. Auditors and oversight bodies increasingly view AAA criteria as indicators of genuine commitment beyond checkbox compliance. Organizations that proactively implement 1.4.8 — particularly by offering color theme controls, respecting system color preferences, and maintaining proper text spacing — are far less likely to face complaints from users with dyslexia, low vision, or photosensitivity.

Second, Turkey has a substantial population of users who benefit directly from 1.4.8. With an estimated 10% prevalence of dyslexia and millions of low-vision users, entities serving large consumer bases — banks, telecoms, e-commerce platforms, hospitals — can expect meaningful portions of their users to struggle with non-compliant visual presentation. Failing to address this is both an accessibility barrier and a business risk.

Third, certain specialized services — particularly in education (private schools authorized by MoNE) and healthcare — may face sector-specific regulatory guidance that raises the bar to AAA for content presented to vulnerable populations such as children, elderly patients, or individuals with cognitive disabilities. In these contexts, 1.4.8 transitions from aspirational to practically mandatory.

Organizations seeking to demonstrate best-in-class accessibility in the Turkish market — and to future-proof their compliance posture as regulations evolve — should treat 1.4.8 as a design standard rather than an optional enhancement. Implementing CSS custom properties for color theming, constraining column widths with ch units, eliminating justified text from prose blocks, and using unitless line-height values are low-cost, high-impact changes that benefit a wide audience and signal genuine accessibility leadership under Turkey's regulatory framework.