Color contrast between "Search" icon and its background is less than 3:1: A11y_VisualStudioCodeServices_Uninstall Visual Studio Code_Search icon_ColorContrast.

[prabhudevu]

"Please do not close this bug. This bug should only be closed by TCS, C+AI Accessibility or the Divisional Driver".

GitHub Tags:

A11yTCS; #A11ySev2; #A11yMAS; #DesktopWeb; #ChromiumEdge; #BM_VisualStudioCodeServices_Web_July2024; #Visual Studio Code Services; #Benchmark; #Win11; #FTP; #Desktopweb; #WCAG1.4.3; #ContrastMinimum; #Closed; #Regressed:06-28-24

Environment Details: 

Application Name:  Visual Studio Code Services URL: https://code.visualstudio.com/docs/setup/uninstall?dark-plus-v2#_windows Microsoft Edge version 126.0.2592.68 (Official build) (64-bit)

Repro steps:

1. Launch the application URL: https://code.visualstudio.com/docs/setup/uninstall?dark-plus-v2#_windows and press ENTER.
2. "Uninstall Visual Studio Code" screen gets opened.
3. TAB to "Search field" in the header.
4. Turn on accessibility insights for desktop and check color contrast between "Search icon" and background.

Actual:

Color contrast between "Search" icon and its background is 2.532:1 which is less than the required color contrast ratio 3:1.

Note: Issue is repro with below URLs as well https://code.visualstudio.com/docs/setup/uninstall?dark-plus-v2 https://code.visualstudio.com/docs/supporting/faq?dark-plus-v2 https://code.visualstudio.com/docs?dark-plus-v2 https://code.visualstudio.com/download?dark-plus-v2 https://code.visualstudio.com/insiders/?dark-plus-v2 https://code.visualstudio.com/?dark-plus-v2 https://code.visualstudio.com/docs/python/editing?dark-plus-v2 https://code.visualstudio.com/docs/python/jupyter-support-py?dark-plus-v2 https://code.visualstudio.com/docs/python/linting?dark-plus-v2 https://code.visualstudio.com/docs/remote/remote-overview?dark-plus-v2 https://code.visualstudio.com/docs/remote/troubleshooting?dark-plus-v2 https://code.visualstudio.com/docs/remote/wsl?dark-plus-v2 https://code.visualstudio.com/docs/?dv=win64user&dark-plus-v2 https://code.visualstudio.com/docs/editor/command-line?dark-plus-v2 https://code.visualstudio.com/docs/getstarted/introvideos?dark-plus-v2 https://code.visualstudio.com/docs/getstarted/keybindings?dark-plus-v2 https://code.visualstudio.com/docs/getstarted/locales?dark-plus-v2 https://code.visualstudio.com/docs/java/java-debugging?dark-plus-v2 https://code.visualstudio.com/docs/languages/csharp?dark-plus-v2 https://code.visualstudio.com/docs/python/debugging?dark-plus-v2

Expected

Color contrast between "Search" icon and its background should be greater than or equal to 3:1

User Impact

Low vision users will not be able to access search icon button if Color contrast between "Search" icon and its background is less than expected.

Attachment

[daviddossett]

Fixed via https://github.com/microsoft/vscode-website/pull/1801

[12-shweta]

rev:shwarh;

[12-shweta]

A11yPreview;

[MounicaDantuluri0809]

@daviddossett

Issue not fixed. Search Button is now not even visible. Please find below for reference of current page UI in "https://code.visualstudio.com/?dark-plus-v2" environment

@prabhudevu FYI.

[daviddossett]

Hm, seems like it's not rendering at all. I'll get a fix going

[daviddossett]

Will be fixed via https://github.com/microsoft/vscode-website/pull/1821

[prabhudevu]

I have verified the issue in the ENV: https://code.visualstudio.com/?dark-plus-v2

Issue is fixed. closing the bug