Uploaded image for project: 'Bitbucket Data Center'
  1. Bitbucket Data Center
  2. BSERV-18779

Commits: Insufficient color contrast of the graph

XMLWordPrintable

      Issue Summary

      The color contrast of the actionable graph has the insufficient color contrast i.e. 3:1.

      Steps to Reproduce

      1. Navigate to the side navigation bar.
      2. Select the "Commits" link and activate it.
      3. Observe that "Commits" page has been appeared on the screen.
      4. Check the color contrast of the graph using CCA tool.
      5. Verify that the color contrast is insufficient.

      Screenshot 1

      Screenshot 2

      Actual Results

      The informative graph (which is interactive) present in the main content area has an insufficient color contrast ratio with following details: 
      This will make it difficult for low vision users to discern meaningful graphics that have insufficient contrast.
       
      fg: #36B37E
      bg: #FFFFFF
      ratio: 2.7:1
       
      fg: #FFFFFF
      bg: #36B37E
      ratio: 2.7:1

      Expected Results

      For the key parts of all the informative images, ensure that the contrast between foreground, background or adjacent colors is 3:1 to make the image's information accessible for low vision and color-blind users.

      Workaround

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

      Environment

      MacBook Pro (16-inch, 2019)
      macOS Ventura Version 13.3.1
      Chrome - Version 114.0.5735.198 (Official Build) (x86_64)
      Firefox- Version 112.0.1 (64-bit)
      Safari- Version 16.4 (18615.1.26.11.23)
      JAWS- Version 2022
      NVDA- Version 2020.3
      Voiceover - Version Latest

              Unassigned Unassigned
              c3f9a46dc7c4 Varsha Bansode (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Created:
                Updated:
                Resolved: