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

Create Pull Request: Insufficient color contrast for informative image

XMLWordPrintable

    Issue Summary

    The "Unified" and "Side-by-Side" images fail to meet the required minimum color contrast ratio.

    Note: A similar issue is observed on the below pages:

    • The "Enhanced word diff", "Whitespace changes" and so on checkboxes are in the same dialog.
    • The "View Pull Request" page.

    Steps to Reproduce

    1. Navigate to the mentioned page.
    2. Navigate to the "Diff view settings" button and activate it.
    3. Navigate to the mentioned radio button and checkbox images.
    4. Use any color contrast testing tool to check the color contrast.
    5. Observe that the color contrast between the mentioned image and the adjacent background is insufficient.

    Screenshot 1

    Screenshot 2

    Actual Results

    The "Unified" and "Side-by-Side" images fail to meet the required minimum color contrast ratio in not selected state.
    Details:
    Foreground color - #DFE1E5
    Foreground color - #FFFFFF
    Current ratio - 1.3: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 behaviour. 

    Environment 

    MacBook Pro (16-inch, 2019)
    macOS 13.4.1 (c) (22F770820d)
    Chrome - Version 115.0.5790.170 (Official Build) (x86_64)
    Firefox- Version 114.0 (64-bit)
    Safari- Version 16.5.2 (18615.2.9.11.10)
    JAWS- Version 2023.2306.28
    NVDA- Version 2022.2.2
    Voiceover - Version Latest

      1. image-2025-02-27-15-58-10-766.png
        1.06 MB
        Varsha Bansode
      2. Screenshot 2023-10-03 at 2.00.39 PM.png
        601 kB
        Rahil Shaikh
      3. Screenshot 2023-10-06 at 6.25.24 PM.png
        378 kB
        Rahil Shaikh

            Unassigned Unassigned
            b4488184f7d2 Rahil Shaikh
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: