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

Color and sensory

Sensory characteristics#

  1. WCAG 2.2 Guideline
  2. 1.3 Adaptable
  3. 1.3.3 Sensory Characteristics

Benefits: Blind and low-vision disabilities

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.

How to pass
  • Can the user access instructions for using the content, even when they cannot perceive shape or size or use information about spatial location or orientation?
  • Are descriptions of controls solely via references to visual or auditory cues avoided?
  • Is additional information provided other than shape and/or location?
  • Does positioning, color, and labeling help identify the information?

Use of color#

  1. WCAG 2.2 Guideline
  2. 1.4 Distinguishable
  3. 1.4.1 Use of Color

Benefits: Colorblind disabilities

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

How to pass
  • Verify that color alone is not used to convey important information.
  • Can all of the information be understood when viewing the page in grayscale?
  • Can all of the page functions be performed when viewing the page in grayscale?

Contrast#

  1. WCAG 2.2 Guideline
  2. 1.4 Distinguishable
  3. 1.4.3 Contrast (Minimum)

Benefits: Low-vision and colorblind disabilities.

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration,that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
How to pass
  • Is the color contrast of the text and its background readable by low-vision users?
  • Using a color contrast tool - are color contrast ratios at least 4.5:1 for text that is < 18 point/24 px, and for bold text that is < 14 point/18.5 px?
  • Using a color contrast tool - are color contrast ratios at least 3:1 for large-scale text that is at least 18 point/24 px, and for large-scale bold text that is at least 14 point/18.5 px?
  • Is there a text that is only decorative and conveys no information? (Decorative text does not need to meet color contrast guidelines)