Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TSDoc> Search]: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds for the 'Search' text. #141

Closed
vaishali1397 opened this issue May 30, 2023 · 1 comment
Closed

[TSDoc> Search]: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds for the 'Search' text. #141

vaishali1397 opened this issue May 30, 2023 · 1 comment
Labels
ms accessibility Issues filed by Microsoft as part of an effort to audit websites and improve their accessibility

Comments

@vaishali1397
Copy link

vaishali1397 commented May 30, 2023 •
edited

Test Environment:
OS Version: 22H2 (OS Build 25370.1)
Browser: Edge Dev (Version 115.0.1866.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. Run the fast pass of accessibility insights for web.
  3. Observe the issue on 'Search' edit field.

Actual Result:
Contrast between foreground and background colors does not meets WCAG 2 AA contrast ratio thresholds for the 'Search' text.
Luminosity ratio for the 'Search' placeholder text under 'Search' edit field is 2.666:1 which is less than 4.5:1.

Expected Result:
The contrast between foreground and background colors must meets WCAG 2 AA contrast ratio thresholds for the 'Search' text.
Luminosity ratio for the 'Search' placeholder text under 'Search' edit field should be greater than or equals to 4.5:1.

Snippet:
Search

How to fix:
Fix any of the following:
Element has insufficient color contrast of 2.66 (foreground color: #969faf, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

Notes:

  1. Same issue repro for code lines present under 'export class Statistic , get Average, IsIineTag and the code lines present under 'Consider a hypothetical input' text.
  2. Same issue repro on code line present under 'Example' heading of 'Tags' link under main navigation landmark.
  3. Same issue repro on code line present under 'Example' heading of '@returns' link under 'docs sidebar navigation landmark'.
  4. Same issue repro on #Run this ....$rush install, $npm text in 3 bullet point, $rush change in the 5 bullet point in 'Submitting a pull request link under 'docs sidebar navigation landmark'.
  5. Same issue repro on 2023 Microsoft text under footer landmark and this issue is throughout the page.

User Impact:
Person with visual disability will get impacted as user will not be able to see the text clearly and hence will not be able to interact with the content easily.

WCAG Reference Link:
https://www.w3.org/TR/WCAG21/#contrast-minimum

Have feedback to share on Bugs? Please help fill Trusted Tester Bug Feedback (office.com)"

MAS1 4 3 Luminosity ratio of Search placeholder is less than required MAS1 4 3 Luminosity ratio of search placeholder text is less than required Notes~ Contrast ratio is less than required
@octogonz octogonz added the ms accessibility Issues filed by Microsoft as part of an effort to audit websites and improve their accessibility label Jun 9, 2023
@vaishali1397
Copy link
Author

Closing this issue and will track with bug id: #166

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
ms accessibility Issues filed by Microsoft as part of an effort to audit websites and improve their accessibility
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@octogonz @vaishali1397