Text Styles, Resize, Reflow, and Zoom

Accessibility Techniques for Text Styles, Resize, Reflow, and Zoom
Topic Technique WCAG Requirement
Text Resize and Reflow Resize Text 200%: The page SHOULD be functional when only the text is magnified to 200% of its initial size. Required
WCAG 1.4.4
Mobile Zoom: The page MUST allow users to zoom in on mobile devices (The following is NOT allowed: <meta name="viewport" content="user-scalable=no">) Required
WCAG 1.4.4
One Scroll Direction Only: Content MUST NOT require scrolling in two directions (both vertically and horizontally) — even when the viewport is set or zoomed to 320 CSS pixels wide (for vertically-scrolling content) or 256 CSS pixels high (for horizontally-scrolling content) — unless both scrolling directions are essential to the usage or meaning of the content. Required
WCAG 1.4.10
(WCAG 2.1)
Text in Images No Images of Text: An image MUST NOT include informative text if an equivalent visual presentation of the text can be rendered using real text (unless the text is essential — such as a logo — or the font, size, color, and background are customizable.). Required
WCAG 1.4.5
Color contrast of small text: Small text (under 18 point regular font or 14 point bold font) MUST have a contrast ratio of at least 4.5 to 1 with the background. Required
WCAG 1.4.3
Color contrast of large text: Large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of at least 3 to 1 with the background. Required
WCAG 1.4.3
Text/Paragraph Styles
Full Functionality with Altered Text Styles: In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
  • Line height (line spacing) to at least 1.5 times the font size
  • Spacing following paragraphs to at least 2 times the font size
  • Letter spacing (tracking) to at least 0.12 times the font size
  • Word spacing to at least 0.16 times the font size.
Required
WCAG 1.4.12
(WCAG 2.1)
Line Spacing: Line spacing SHOULD be at least 1.5 within paragraphs. best practice
Paragraph Spacing: Paragraph spacing SHOULD be at least 1.5 times larger than the line spacing. best practice
Word Spacing: Word spacing SHOULD be set to at least 0.16 times the font size. best practice
Letter Spacing: Letter spacing SHOULD be set to at least 0.12 times the font size. best practice
Line Justification: Text SHOULD NOT be full justified. best practice
Column Width: The number of characters or glyphs per line in any section or column of text SHOULD NOT exceed 80 (40 characters in Chinese, Japanese, or Korean) best practice
Font Legibility: Fonts SHOULD be easily readable by sighted users. best practice
Color Contrast See the requirements for Color and Contrast. Required
multiple
CSS-Generated Content Avoid CSS-Generated Content: CSS-generated content SHOULD be avoided (unless it is for presentation/decorative purposes only). best practice
Text Alternative for CSS-Generated Content: A text alternative for informative CSS-generated content MUST be provided, AND the CSS-generated text SHOULD be set to aria-hidden="true" Required
WCAG 1.3.1
Decorative CSS-Generated Content: Decorative or redundant CSS-generated content SHOULD be set to aria-hidden="true" best practice
Emphasis and Highlighting Emphasis: Critical emphasis in the text SHOULD be conveyed in a text-based format, not visual styling alone. best practice
Highlighting markup: Highlighted text SHOULD be marked with the <mark> element. best practice
Text-based highlighting: Critical highlighted text SHOULD be supplemented with a text-based method to convey the meaning of the highlighting. best practice
Quotations Blockquote: The <blockquote> element SHOULD be used to designate long (block level) quotations. best practice
Indentation: The <blockquote> element SHOULD NOT be used for visual styling (indentation) alone. best practice
Inline quotations: The <q> element (for inline quotations) SHOULD NOT be used as the only way to designate quotations, due to poor support in screen readers and some browsers. best practice
Strikethrough/Delete and Insert Strikethrough markup: Strikethrough text SHOULD be marked with the <del> element. best practice
Strikethrough supplemental text: Critical strikethrough text MUST be supplemented with a text-based method to convey the meaning of the strikethrough. best practice
Insert markup: Text designated for insertion SHOULD be marked with the <ins> element. best practice
Insert supplemental text: Critical text designated for insertion MUST be supplemented with a text-based method to convey the meaning of the insertion. best practice