Dashboard: Insufficient color contrast for the placeholder text.

XMLWordPrintable

    • Severity 3 - Minor

      Issue Summary

      On the “Dashboard | create space” page, the placeholder texts such as “Filter” fails the minimum colour contrast requirement of 4:5:1 with its background.

      Steps to Reproduce

      1. Open the “Dashboard" page.
      2. Navigate to the side content "create space", A modal will open.
      3. Navigate to the mentioned placeholder text
      4. With the CCA tool, take the colour contrast of mentioned instance with the surrounding.

      Screenshot

      Actual Results

      When checked with the colour contrast analyzer tool, the colour contrast of the placeholder text “Filter“ in the default state with the surrounding is failing with the following details →

      • Foreground- #7A869A , Background-#FAFBFC , Ratio-3.6:1

      As a result, users who cannot distinguish between the colours would have difficulty reading through the content.

      Expected Results

      Ensure all texts that appear have a colour contrast difference of at least 4:5:1 with the surroundings to ensure that users who cannot distinguish between the colours can still find the texts.

      Increase the colour contrast of text to achieve a ratio of 4:5:1 which will help in fixing this issue.

      A colour contrast analyzer can be downloaded from Color Contrast Checker - TPGi

      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 13.3.1
      Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
      Firefox- Version 92.0 (64-bit)
      Safari- Version 16.4 (18615.1.26.110.1)
      JAWS- Version 2022
      NVDA- Version 2021.2
      Voiceover - Version Latest

            Assignee:
            Unassigned
            Reporter:
            Nayan Kamble (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: