Perceivable / 1.4 Distinguishable
1.4.8Visual Presentation
Level AAAFor blocks of text, let users switch to a presentation with selectable foreground/background colors, a line width of no more than about 80 characters (40 for full-width text), no full justification, line spacing at least 1.5x the font size with paragraph spacing at least 1.5x that, and no horizontal scrolling when zoomed to 200%. This doesn't need to be the default appearance.
Note
A detailed commentary for this success criterion is not yet available. In the meantime, this page lists related patterns, techniques, and links to the normative sources.
Related Techniques
Specific implementation techniques for meeting this success criterion. This site doesn't include the full text, so follow the links to the original W3C documents.
Sufficient Techniques(19)
Show all (19)
- C12: Using percent for font sizes(opens in a new tab)waic.jp(opens in a new tab)
- C13: Using named font sizes(opens in a new tab)waic.jp(opens in a new tab)
- C14: Using em units for font sizes(opens in a new tab)waic.jp(opens in a new tab)
- C19: Specifying alignment either to the left or right in CSS(opens in a new tab)waic.jp(opens in a new tab)
- C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized(opens in a new tab)waic.jp(opens in a new tab)
- C21: Specifying line spacing in CSS(opens in a new tab)waic.jp(opens in a new tab)
- C23: Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content(opens in a new tab)waic.jp(opens in a new tab)
- C24: Using percentage values in CSS for container sizes(opens in a new tab)waic.jp(opens in a new tab)
- C25: Specifying borders and layout in CSS to delineate areas of a web page while not specifying text and text-background colors(opens in a new tab)waic.jp(opens in a new tab)
- G146: Using liquid layout(opens in a new tab)waic.jp(opens in a new tab)
- G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults(opens in a new tab)waic.jp(opens in a new tab)
- G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text(opens in a new tab)waic.jp(opens in a new tab)
- G169: Aligning text on only one side(opens in a new tab)waic.jp(opens in a new tab)
- G172: Providing a mechanism to remove full justification of text(opens in a new tab)waic.jp(opens in a new tab)
- G175: Providing a multi color selection tool on the page for foreground and background colors(opens in a new tab)waic.jp(opens in a new tab)
- G188: Providing a button on the page to increase line spaces and paragraph spaces(opens in a new tab)waic.jp(opens in a new tab)
- G204: Not interfering with the user agent's reflow of text as the viewing window is narrowed(opens in a new tab)waic.jp(opens in a new tab)
- G206: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text(opens in a new tab)waic.jp(opens in a new tab)
- SCR34: Calculating size and position in a way that scales with text size(opens in a new tab)waic.jp(opens in a new tab)
Failures(2)
- F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa(opens in a new tab)waic.jp(opens in a new tab)
- F88: Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)(opens in a new tab)waic.jp(opens in a new tab)
Normative References
- Success Criterion 1.4.8 Visual Presentation — WCAG 2.2(opens in a new tab)The normative requirement text.
- Understanding Visual Presentation — W3C(opens in a new tab)Official guidance on intent, examples, and techniques.