Thanks to visit codestin.com
Credit goes to github.com

Skip to content

{Freeway-Bug}[TSDoc> Search]: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds (p) #281

@Raisul123

Description

@Raisul123

Test Environment:
Version: Version 24H2 (OS Build 26200.5603)
Browser Version:138.0.3324.1 (Official build) dev (64-bit)
URL: https://tsdoc.org/
Tool: Accessibility Insights for Web

Repro Steps:

  1. Open the above URL in edge dev browser and login with v-.
  2. Press the tab key and navigate to the 'Search' field and press enter key to activate it.
  3. Run the fast pass of accessibility insights for web.
  4. Observe the issue.

Actual Result:
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds for the "No recent searches" text
Luminosity ratio for the "No recent searches" text is 4.16:1 which is less than 4.5:1.

Expected Result:
Luminosity ratio for the "No recent searches" text should be equal to or greater than 4.5:1.

Snippet:
(p class="DocSearch-Help">No recent searches</p)

How to fix:
Fix any of the following:
Element has insufficient color contrast of 4.16 (foreground color: #707783, background color: #f5f6f7, font size: 9.7pt (12.96px), font weight: normal). Expected contrast ratio of 4.5:1

User Impact:
It will impact the low vision user as they will not be able to see the search result properly if the contrast ratio is less than 4.5:1.

Attachments:

Image Image

WCAG Reference:
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum

Have feedback on bugs logged, please tag bug as “A11yRCA” and add your feedback in the comment section.

Metadata

Metadata

Assignees

No one assigned

    Labels

    A11yCTBug while performing full e2e accessibility test passA11ySev2Accessibility severityA11yWcagWcag accessibility violationHCL-TSDocproduct tag tracking accessibility testingTSDoc_WebbugSomething isn't working as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions