Skip to main content

Visual

Find visual requirements for testing mobile experiences.

Color and contrast (VIS-1)

Not only color (VIS-1-1)

Color is not the only way that meaning or information is conveyed visually

How to test

Tool: Visual inspection

  1. Identify any content which relies on color to convey meaning or information.
  2. Determine whether or not the same meaning or information is provided when color is changed to grayscale.
  3. Confirm that something other than color is provided to provide the same meaning or information when color is removed.

Test outcomes

  • Pass: All content that uses color to convey meaning or information also includes a non-color equivalent.

  • Fail: Some content that uses color to convey meaning or information does not include a non-color equivalent.

  • NA: Color is not used to convey meaning or information.

Related WCAG criteria

WCAG 2.2 A - 1.4.1 Use of Color

Color contrast ratio (VIS-1-2)

A color contrast ratio of text 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.

How to test

Tool: Contrast Checking Tool such as WebAIM Contrast Checker

  1. Determine the color used for the foreground and background on all text content.
  2. Enter the values in a color contrast tool such as WebAIM Contrast Checker.
  3. Confirm that text has sufficient contrast against its background and/or compared to surrounding elements. Note: If using a physical mobile device, you may need to take a screenshot to verify contrast ratio on a desktop or know the color values.

Test outcomes

  • Pass: All text content has sufficient contrast.

  • Fail: Some text content does not have sufficient contrast.

Related WCAG criteria

WCAG 2.2 AA - 1.4.3 Contrast (Minimum)

Contrast for non-text UI components (VIS-1-3)

All non-text content and controls have sufficient contrast ratio of 3:1 against their respective background. This includes both graphical content (for example: iconography) as well as interactive content and can also include a combination of both.

How to test

Tool: Contrast Checking Tool such as WebAIM Contrast Checker

  1. Determine the color used for the foreground and background on all non-text elements .
  2. Enter the values in a color contrast tool.
  3. Confirm that each interactive element has at least 3:1 contrast against its background and/or compared to surrounding elements. Note: If using a physical mobile device, you may need to take a screenshot to verify contrast ratio on a desktop or know the color values.

Test outcomes

  • Pass: All non-text content has sufficient contrast.

  • Fail: Some non-text content does not have sufficient contrast.

  • NA: A non-text element that is in a disabled state and other similar criteria may result in NA for a specific non-text element (view requirement for details).

Related WCAG criteria

WCAG 2.2 AA - 1.4.11 Non-text Contrast

Size and layout (VIS-2)

Touch target size (VIS-2-1)

Touch targets need to be large enough - Android 48x48dp minimum, iOS 44x44pt minimum

How to test

Tool: Xcode - Accessibility Inspector (iOS), Accessibility Scanner (Android)

  1. Target each interactive element that will receive touch interaction or input.
  2. Determine the size of the touch element’s target area.
  3. Confirm that the size of the touch element’s target area is at least 44x44pt for iOS and 48x48dp for Android.

Test outcomes

  • Pass: All touch target areas are at least 44x44pt for iOS and 48x48dp for Android.

  • Fail: One or more touch target areas are less than 44x44pt for iOS and 48x48dp for Android.

  • NA: Target is a link or button in a block of text that requires a specific presentation.

Related WCAG criteria

WCAG 2.2 AA - 2.5.8 Target Size

Code order matches logical content order (VIS-2-2)

The reading order matches the visual order of content

How to test

Tool: Visual inspection and screen reader

  1. Evaluate the visual content order and compare to the order of presentation when using a screen reader.
  2. Verify the reading order matches the visual order of content.

Test outcomes

  • Pass: The visual content order is consistent for screen reader users also.

  • Fail: The visual content order and screen reader content order do not match.

Related WCAG criteria

WCAG 2.2 A - 1.3.2 Meaningful Sequence

No blinking or flashing (VIS-2-3)

No Blinking or Flashing (VIS-2-3) Content that blinks or flashes rapidly must never be used. “Rapidly” means blinking/flashing more than 3 times in 1 second. If there is any doubt about the frequency of flashing then this would fail.

How to test

Tool: Visual inspection

  1. Perform a visual inspection of the view.
  2. Confirm that each view contains no content that blinks or flashes rapidly.

Test outcomes

  • Pass: Content that blinks or flashes rapidly is not used.

  • Fail: Content that blinks or flashes rapidly is used.

Related WCAG criteria

WCAG 2.2 A - 2.3.1 Three Flashes or Below Threshold

Images and graphics (VIS-3)

Text alternatives (VIS-3-1)

All meaningful non-text content MUST provide text alternatives that provide equivalent information, context, and purpose to the user AND all decorative content is hidden from the user.

How to test

Tool: VoiceOver (iOS), TalkBack (Android)

  1. Evaluate all non-text content using VoiceOver/Talkback.
  2. 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 hidden.

Test outcomes

  • Pass: All images and non-text objects that need a text alternative have an accurate and descriptive accessibility label.

  • Fail: One or more images or non-text objects that need a text alternative do not have an accessibility label OR the description is not accurate.

  • NA: No images or non-text objects that need a text alternative are present.

Related WCAG criteria

WCAG 2.2 A - 1.1.1 Non-text Content

No images of text (VIS-3-2)

Use real text instead of images of text to ensure that the text can be programmatically determined and adapts to user settings for zoom and color.

How to test

Tool: Screen reader or inspect app code

  1. Identify images of text:
  • Option 1: Move screen reader focus to all text content and listen for any instance where text is read as an image or focus does not move to the text.
  • Option 2: Review the code for instances of images with text embedded in them.

Test outcomes

  • Pass: All text content is real text.

  • Fail: One or more images with embedded were found.

  • NA: No images with embedded, meaningful text are present.

Related WCAG criteria

WCAG 2.2 AA - 1.4.5 Images of Text

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.