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. Testing methodology 1.4.4.a	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">`) Testing methodology 1.4.4.a	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). Testing methodology 1.4.5.a	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. Testing methodology 1.4.3.a	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. Testing methodology 1.4.3.b	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. Testing methodology 1.4.12	Required WCAG 1.4.12 (WCAG 2.1)
	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"` Testing methodology 1.3.1.a	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 Through Visual Styling: Critical emphasis in the text SHOULD be conveyed through visual styling.	Best Practice
	Emphasis in Text-Based Format: Critical emphasis in the text SHOULD be conveyed in a text-based format.	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