Uploaded image for project: 'Jira Service Management Data Center'
  1. Jira Service Management Data Center
  2. JSDSERVER-11555

Object Overview Modal with default force mode graph : An icon lacks 3:1 contrast ratio.

      Issue Summary

      Parts of an icon (with no text) do not have a contrast ratio of 3:1 against adjacent color(s). These icon parts are required for understanding.

      Tested URL

      https://instenv-21072-japp.instenv.internal.atlassian.com/secure/ObjectSchema.jspa?id=3&typeId=43&mode=object&objectId=201

      Steps to Reproduce

      1. Launch the URL
      2. Navigate to the main content area and go to the "Referenced Server/s".
      3. 1. Click on the "oracledb-11g-prod" button, just beside the "Referenced Server:" text, in the "Can we get this server request approved?" page.
      4. Then the "Object Overview" modal will display.
      5.  Click on the "Show graph" icon button.
      6.  Click on the "Force" button. Then the graph will display in the Force view.
      7.  Click on the "Configure" link icon, on the left navigation. Then the above-mentioned icons will display.

      Actual Results

      1. When users with low vision access the page, the text should have sufficient color contrast of 3:1, with background color as #FFFFFF and Icon color: #E5D5E6 for "A reference" icon which is in the "Configuration" section, has an insufficient color contrast ratio of 1.4:1. As a result, low vision and elderly users won't be able to identify the boundary of the interactive elements. This will cause a poor user experience for low vision users.
      2. When users with low vision access the page, the text should have sufficient color contrast of 3:1, with background color as #FFFFFF and Icon color: #92F38E for "Operating system" icon which is in the "Configuration" section, has an insufficient color contrast ratio of 1.4:1. As a result, low vision and elderly users won't be able to identify the boundary of the interactive elements. This will cause a poor user experience for low vision users.

      Expected Results

      The visual state of an active user interface component MUST have sufficient contrast of 3:1 with the adjacent background. Exceptions exist. 
      Fix this issue by adjusting the visual focus indicator or state indicator (e.g. selected, checked, pressed, etc.) of the user interface component and/or background to increase the contrast with either the inner or outer adjacent background to at least 3:1. People who have low vision or are colorblind may have difficulty perceiving that an element is interactive or what its state is - e.g. whether it has keyboard focus, is selected/checked/pressed, etc. - if the contrast between the element boundaries and/or state indicators and its background or adjacent colors is insufficient. When an interactive element's visual boundaries and state indicators have adequate contrast, people who have low vision or are colorblind are more likely to be able to perceive which elements on the screen are interactive and what their current state is.

      REFERENCE: 
      WCAG Understanding document: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrastPeople

      Screenshot

      Workaround

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

      Bug Ref: 745887

      Bulldog Ref: JSMDC-12590

            [JSDSERVER-11555] Object Overview Modal with default force mode graph : An icon lacks 3:1 contrast ratio.

            Atlassian Update – 20 December 2024

            Hi everyone,

            As part of our accessibility and usability improvements, we’re now offering light and dark theme for JSM. Because of this, we’ve decided to deprecate the Original theme. Upgrade to JSM 10.3 Long Term Support to enjoy the new themes.

            Best regards

            Bilal Cinarli
            Principal Frontend Engineer

            Bilal Cinarli added a comment - Atlassian Update – 20 December 2024 Hi everyone, As part of our accessibility and usability improvements, we’re now offering light and dark theme for JSM. Because of this, we’ve decided to deprecate the Original theme. Upgrade to JSM 10.3 Long Term Support to enjoy the new themes. Best regards Bilal Cinarli Principal Frontend Engineer

              Unassigned Unassigned
              12b69dcabe29 Matthew Brennan
              Affected customers:
              0 This affects my team
              Watchers:
              2 Start watching this issue

                Created:
                Updated:
                Resolved: