Skip to main content

Visual design and multimedia

Find visual design and multimedia requirements for testing web experiences.

Content resizing, styling, & reflow (VIS-1)

Browser zoom usable (VIS-1-1)

Using the built-in browser functionality to zoom all page content to 200% (including text), all interactive content must remain fully usable.

How to test

Tool: System Settings

Use browser zoom to magnify your viewport to 200% and confirm that all interactive content remains fully usable.

Test outcomes

  • Pass: All interactive content remains fully usable up to 200%.

  • Fail: Some interactive content does not remain fully usable between 0 - 200%.

Related WCAG criteria

WCAG 2.2 AA - 1.4.4 Resize Text

Content reflow (VIS-1-2)

Content remains functional and no information is lost when viewed at 320px width (for vertical scrolling content) or 256px height (for horizontal scrolling content). Scrolling in two directions must not be required.

Exception: two direction scrolling is allowed for elements that require it for usage such as:

  • Data tables/charts
  • Photos
  • Maps

How to test

Tool: Browser Dev Tools (F12)

  1. Use the browser dev tools/Inspector to set the page width to 320px for vertical scrolling content or 256px for horizontal scrolling content.
  2. Confirm that all content remains functional and that no information is lost (for example: cut off text, missing UI, overlapping content).
  3. Confirm that scrolling in two directions is not required.

Exceptions: Horizontal scrolling is allowed for the following content:

  • Data tables
  • Photos
  • Maps
  • Charts
  • Games
  • UI with toolbars

Test outcomes

  • Pass: Content remains functional and no information is lost when viewed at the required height or width. Scrolling in two directions is not required unless an element requires it for usage.

  • Fail: Content is not functional or information is lost when viewed at the required height or width. Alternatively, scrolling in two directions is required.

  • NA: Content is any of the following:

    • Data tables
    • Photos
    • Maps
    • Charts
    • Games
    • UI with toolbars

Related WCAG criteria

WCAG 2.1 AA - 1.4.10 Reflow

User text styling (VIS-1-3)

User text style settings do not cause a loss of content when:

  • Line height (line spacing) is increased to at least 1.5 times the font size;
  • Spacing following paragraphs is set to at least 2 times the font size;
  • Letter spacing (tracking) is increased to at least 0.12 times the font size;
  • Word spacing is set to at least 0.16 times the font size.

How to test

Tool: Text Spacing Bookmarklet

  1. Load the page in the browser of your choice.
  2. Run the Text Spacing Bookmarklet.
  3. Perform a visual inspection of the content and confirm that there is not a resulting loss of content or meaning.

Test outcomes

  • Pass: There is not a resulting loss of content or meaning when any of the four text spacing settings are changed.

  • Fail: There is a loss of content or meaning when the four text spacing settings are changed.

Related WCAG criteria

WCAG 2.1 AA -1.4.12 Text Spacing

Color usage (VIS-2)

Color contrast ratio (VIS-2-1)

A color contrast ratio of text, informational images, and images of text to their backgrounds must be at least 4.5:1, except if the text is 18pt or 14pt bold or larger, where a ratio of 3:1 is then required. Text that is part of a logo is not subject to this requirement.

If there is content that does not pass color contrast requirements, then an alternate (high-contrast) compliant style sheet must be available.

How to test

Tool: WebAIM Contrast Checker

Use a contrast analyzer to check color contrast ratio of text, and images of text to their backgrounds. Use the eye dropper tool to check any text that is missed by the automated scan. If a failure is identified with the automated scan which seems questionable use the eye dropper tool to double check. Contrast ratio must be at least 4.5:1, except if the text is 18pt or 14pt bold or larger, where a ratio of 3:1 is then required.

Note: All of this information will be provided in the contrast validation tool’s side panel, except for text that is not HTML text or an HTML colored background (for example: text over a gradient image). In this case, use the color picker tool from the panel to pick samples and determine if the text fails in any places.

If there is content that does not pass color contrast requirements, then an alternate (high-contrast) compliant style sheet must be available.

Test outcomes

  • Pass: All text meets expected minimum contrast ratio.

  • Fail: All text does not meet the expected minimum contrast ratio and an alternate style sheet is not provided.

  • NA: Text is part of an inactive user interface component or pure decoration.

Related WCAG criteria

WCAG 2.2 AA - 1.4.3 Contrast (Minimum)

Contrast for non-text UI components (VIS-2-2)

User interface components and graphical objects must have a contrast ration of at least 3:1 against adjacent colors.

How to test

Tool: WebAIM Contrast Checker

Confirm that all user interface components and graphical objects have a contrast ratio of at least 3:1 against adjacent colors including the background and other non-text objects by using the eye dropper tool in a contrast analyzer.

Test outcomes

  • Pass: All user interface components and graphical objects have a contrast ratio of 3:1 against adjacent colors.

  • Fail: Some user interface components and/or graphical objects do not have a contrast ratio of 3:1 against adjacent colors.

Related WCAG criteria

WCAG 2.1 AA - 1.4.11 Non-text Contrast

Support high contrast (VIS-2-3)

All content adapts and supports the user’s high contrast theme settings

How to test

Tool: System Settings

Windows: Use the search feature to search for Contrast Themes. Activate the high contrast themes from the settings window. Mac: Go to System Preferences>Accessibility>Display>Invert Colors.

Test outcomes

  • Pass: All content supports high contrast themes.

  • Fail: Some content does not support high contrast themes.

Related WCAG criteria

Not only color (VIS-2-4)

If a color difference is used to convey information, that information must also be available in text or through some other alternative method. Link text may be distinguished from static text through use of color as long as the following are true:

  • A 3:1 contrast ratio difference exists between the link text and other static text
  • A visual indicator is provided when the link receives focus (for example: visible underline on hover and keyboard focus)

How to test

Tool: Visual inspection

  1. Perform a visual inspection of the page.
  2. Confirm that whenever a difference in color is used to convey information, that information is also be available in text or through some other alternative method.

Test outcomes

  • Pass: A non-color alternative is presented along with color.

  • Fail: Only color is used to indicate meaning.

  • NA: Color is not used to convey meaning.

Related WCAG criteria

WCAG 2.2 A - 1.4.1 Use of Color

Images (VIS-3)

Text alternatives (VIS-3-1)

All non-text content must provide text alternatives that provide equivalent information, context, and purpose to the user using the following techniques (as applicable):

  • For elements, provide the text alternative using the alt attribute
  • For other non-text content (for example: ), aria-label/labelledby, or visibly hidden textaria-label/labelledby, or visibly hidden text
  • For decorative elements, provide (alt null)
  • For other decorative non-text content,

How to test

Tool: Accessibility Insights

Using Accessibility Insights, confirm that all non-text content provides text alternatives that provide equivalent information, context, and purpose to the user and that decorative non-text content is appropriately hidden using null alternative text or

Test outcomes

  • Pass: All non-text content provides text alternatives and all decorative content is hidden correctly.

  • Fail: Some non-text content does not have text alternatives or some decorative content is not hidden correctly.

  • NA: Non-text content is not present.

Related WCAG criteria

WCAG 2.2 A - 1.1.1 Non-text Content

No images of text (VIS-3-2)

Text must always be presented using live text and CSS rather than an image of text, except for logos and within pictures where it cannot be avoided (for example: graphs or screenshots).

How to test

Using the mouse, click and drag over all text on the page to select it. HTML text will be selectable. Text that is part of an image will show the entire image being highlighted. Confirm that text is presented using text rather than in an image of text, except for logos and within pictures where it cannot be avoided (for example: graphs or screenshots).

Test outcomes

  • Pass:Images of text are not used.

  • Fail: Images of text are used.

Related WCAG criteria

WCAG 2.2 AA - 1.4.5 Images of Text

Multimedia (VIS-4)

Captions (prerecorded) (VIS-4-1)

Captions are available for content with both audio and video, except when the content is an alternative for text and is clearly labeled as such.

How to test

Tool: Visual inspection

  1. Identify prerecorded content with both audio and video.
  2. Confirm that captions are available.
  3. Confirm the captions contain all audio information (for example: speech, sound effects, music, etc.).

Test outcomes

  • Pass: All prerecorded content with both audio and video has accurate captions.

  • Fail: Any prerecorded content with both audio and video does not have captions, or the captions do not contain all audio information.

  • NA: No prerecorded content with both audio and video exists.

Related WCAG criteria

WCAG 2.2 A - 1.2.2 Captions (Prerecorded)

Audio description or media alternative (prerecorded) (VIS-4-2)

A transcript or audio description is available for content with both audio and video, except when the content is an alternative for text and is clearly labeled as such.

How to test

Tool: Visual inspection

  1. Test “Audio Description (Prerecorded) VIS-4-4”.
  2. If “Audio Description (Prerecorded) VIS-4-4” passes, this also passes.
  3. If “Audio Description (Prerecorded) VIS-4-4” fails, confirm a transcript exists that describes the meaningful visual information.

Test outcomes

  • Pass: “Audio Description (Prerecorded) VIS-4-4” is passing. or A transcript is available that describes all meaningful information.

  • Fail: Neither a transcript or audio description is available and there is meaningful information not described by the audio.

  • NA: No content with both audio and video exists. or The exception is met.

Related WCAG criteria

WCAG 2.2 A - 1.2.3 Audio Description or Media Alternative (Prerecorded)

Captions (live) (VIS-4-3)

Captions must be available for live content with both audio and video.

How to test

Tool: Visual inspection

  1. Identify live content with both audio and video.
  2. Confirm that captions are available.
  3. Confirm the captions contain all audio information (for example: speech, sound effects, music, etc.).

Test outcomes

  • Pass: All live content with both audio and video has captions.

  • Fail: Any live content with both audio and video does not have captions or the captions do not contain all of the audio information.

  • NA: No live content with both audio and video exists.

Related WCAG criteria

WCAG 2.2 AA - 1.2.4 Captions (Live)

Audio description (prerecorded) (VIS-4-4)

An audio description track must be available if there is meaningful visual information that is not included in the audio track for prerecorded content with both audio and video.

How to test

Tool: Visual inspection

  1. Identify prerecorded content with both audio and video.
  2. If the content provides meaningful visual information that is not described by the audio, confirm it also includes an audio description track that explains the visual information.

Test outcomes

  • Pass: Audio description is available when needed.

  • Fail: Meaningful visual information in the video is not described by the audio and an audio description track is missing, incomplete, or inaccurate.

  • NA: The audio describes the visual content. or There is no prerecorded content with both audio and video.

Related WCAG criteria

WCAG 2.2 AA - 1.2.5 Audio Description (Prerecorded)

Transcripts for audio-only/video-only (VIS-4-5)

For audio-only and video-only media, a transcript must be provided which provides the same information as presented in the original media content.

How to test

Tool: Visual inspection

A transcript which provides the same information as presented in the original media content must be made available for all audio-only and/or video-only content.

Test outcomes

  • Pass: Transcripts are provided.

  • Fail: Transcripts are not provided.

  • NA: No audio or video only content is present.

Related WCAG criteria

WCAG 2.2 A - 1.2.1 Audio-only & Video-only (Prerecorded)

These materials are intended for illustrative purposes only. They are provided AS-IS and should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. Any links to third party sites are for your information only and do not constitute endorsement by or affiliation with Visa. Visa has no insight into and/or control over third party content and code and disclaims all liability for any such components.

Copyright © 2026 Visa. All rights reserved.