Help Center | View request: Insufficient color contrast for focus indicators of user interface controls.

XMLWordPrintable

    • Severity 3 - Minor

      Issue Summary

      The focus indicator of the mentioned buttons has an insufficient color contrast ratio.

      Steps to Reproduce

      1. Open "JSM System Dashboard" page.
      2. Navigate to the "Projects" in the header section and choose any ITSM project from the options.
      3. Navigate to the "Raise a request" link in the side navigation and activate it.
      4. Navigate to the "Requests" button and select "All the request" option.
      5. Navigate and activate any request.
      6. Navigate to the "Escalate", "Resolve this issue" and "Cancel request" buttons and activate them.
      7. Navigate using 'Tab' key to the mentioned buttons in the modal dialogs.
      8. Observe that the focus indicator of the mentioned buttons has an insufficient color contrast.

      Screenshot 1 

      Screenshot 2

      Screenshot 3

      Actual Results

      The #388BFF focus indicator of “Escalate", "Resolve this issue" and "Cancel request" buttons present in the modal dialogs available after activating the “Escalate", "Resolve this issue" and "Cancel request" buttons respectively in the main content area has an insufficient color contrast ratio of 2:1 with #0055CC inner background.

      Foreground: #388BFF
      Background: #0055CC
      Contrast ratio: 2:1

      This will make it difficult for the people with low vision and color blindness to identify the focus indicator for the buttons that have insufficient color contrast.

      Expected Results

      The contrast ratio between the foreground color of the focus indicator and its inner background color should be sufficient. Ensure that the color contrast ratio of the focus indicator for all user interface controls is 3:1 with the foreground and background color.

      Alternatively, set the CSS outline-offset property for the mentioned buttons to ensure that clear focus indication is available for users.

      Workaround

      Currently there is no known workaround for this behavior. A workaround will be added here when available.

      Environment

      MacBook Pro (16-inch, 2021)
      macOs Sonoma 14.7
      Chrome - Version 131.0.6778.86 (Official Build) (arm64)
      Firefox- Version 92.0 (64-bit) 
      Safari- Version 17.0 (19616.1.27.211.1)
      JAWS- Version 2023
      NVDA- Version 2021.2 
      Voiceover - Version Latest

            Assignee:
            Bohdan Hulovatyi
            Reporter:
            Sojal Shende
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: