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.
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">
)
One Scroll Direction Only: Content MUST NOT require scrolling in two directions (both vertically and horizontally) — even when zoomed in up to 320px wide (for vertically-scrolling content) or 256px wide (for horizontally-scrolling content) — unless both scrolling directions are essential to the usage or meaning of the content.
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.).
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.
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.
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.
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"
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
Last updated
Was this helpful?