🖋️
Web Accessibility Resources
  • Web Accessibility
  • Cheat Sheets
    • Structure and Semantics
      • Page Title
      • Language
      • Headings
      • Landmarks
      • Lists
      • Tables
      • Iframes
      • Markup Validity
      • Other Semantic Elements
    • Links & Navigation
      • Links
      • Site Navigation
      • Within-Page Navigation
      • Reading Order/Focus Order
    • Images & Visual Design
      • Images
      • Color & Contrast
      • Text Styles, Resize, Reflow, and Zoom
      • Visual Cues
      • Adaptive and Responsive Output
    • Multimedia, Animations, and Motion
      • Audio and Video
      • Animation, Motion, and Timed Content
    • User Input, Forms, and Dynamic Content
      • Device-Independent User Input
      • Form Input, Labels, and Instructions
      • Form Validation and Feedback
      • Dynamic Content (JavaScript, AJAX)
      • Custom Widgets (JavaScript, ARIA)
      • CAPTCHA
    • Keyboard Commands
  • Semantic Group Labels
Powered by GitBook
On this page

Was this helpful?

  1. Cheat Sheets
  2. Images & Visual Design

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

PreviousColor & ContrastNextVisual Cues

Last updated 5 years ago

Was this helpful?

Required

Required

Required (WCAG 2.1)

Required

Required

Required

Required (WCAG 2.1)

Required

WCAG 1.4.4
WCAG 1.4.4
WCAG 1.4.10
WCAG 1.4.5
WCAG 1.4.3
WCAG 1.4.3
WCAG 1.4.12
WCAG 1.3.1