Chi Design System
v6.29.0v6.28.0v6.27.0v6.26.0v6.25.0v6.24.0v6.23.0v6.22.0v6.21.0v6.20.0v6.19.0v6.18.0v6.17.0v6.16.0v6.15.0v6.14.0v6.13.0v6.12.0v6.11.0v6.10.0v6.9.0v6.8.0v6.7.0v6.6.0v6.5.0v6.4.0v6.3.0v6.2.0v6.1.0v6.0.0v5.78.0v5.77.0v5.76.0v5.75.0v5.74.0v5.73.0v5.72.0v5.71.0v5.70.0v5.69.0v5.68.0v5.67.0v5.66.0v5.65.0v5.64.0v5.63.0v5.62.0v5.61.0v5.60.0v5.59.0v5.58.0v5.57.0v5.56.0v5.55.0v5.54.0v5.53.0v5.52.0v5.51.1v5.51.0v5.50.0v5.49.0v5.48.0v5.47.0v5.46.0v5.45.0v5.44.0v5.43.0v5.42.0v5.41.0v5.40.0v5.39.0v5.38.0v5.37.0v5.36.0v5.35.0v5.34.0v5.33.0v5.32.0v5.31.0v5.30.0v5.29.0v5.28.0v5.27.0v5.26.0v5.25.0v5.24.0v5.23.0v5.22.0v5.21.0v5.20.1v5.20.0v5.19.0v5.18.0v5.17.0v5.16.0v5.15.0v5.14.1v5.14.0v5.13.1v5.13.0v5.12.0v5.11.0v5.9.1v5.9.0v5.8.0v5.7.0v5.6.0v5.5.0v5.4.0v5.3.1v5.3.0v5.2.0v5.1.0v5.0.0v4.4.0v4.3.0v4.2.0v4.1.2v4.1.1v4.1.0v4.0.0v3.17.0v3.16.0v3.15.0v3.14.0v3.13.0v3.12.0v3.11.0v3.10.0v3.9.0v3.8.0v3.7.0v3.6.0v3.5.0v3.4.0v3.3.0v3.2.0v3.1.1v3.1.0v3.0.0v2.6.0v2.5.1v2.5.0v2.4.1v2.4.0v2.3.0v2.2.0v2.1.0v2.0.0Email SupportTalk #Chi on Microsoft Teams
CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State
CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Text

Resize text#

  1. WCAG 2.2 Guideline
  2. 1.4 Distinguishable
  3. 1.4.4 Resize text
Perceivable
Content must be presentable to users in ways they can perceive.
Level AA
Requirements must be satisfied to pass WCAG 2.2 Level AA Success Criteria.

Benefits: Low vision disabilities

Except for captions and images of text, text can be resized without Assistive Technology up to 200 percent without loss of content or functionality.

How to pass
  • Can visually rendered text be scaled successfully so that it can be read directly by people with mild visual disabilities, without requiring the use of Assistive Technologies such as a screen magnifier?
  • Including text-based controls (text characters that have been displayed so that they can be seen vs. text characters that are still in data form such as ASCII).
  • Can content be scaled up to 200% - up to twice the width and height?

Images of text#

  1. WCAG 2.2 Guideline
  2. 1.4 Distinguishable
  3. 1.4.5 Images of Text
Perceivable
Content must be presentable to users in ways they can perceive.
Level AA
Requirements must be satisfied to pass WCAG 2.2 Level AA Success Criteria.

Benefits: Blind disabilities.

Text is used to convey information rather than images of text. Achieve desired default visual presentation, to enable people who require a particular visual presentation of text to be able to adjust the text presentation as needed.

How to pass
  • Are images used to present text?
  • Is text embedded in images?
  • Is actual text used instead images of text?