vscode-azurefunctions icon indicating copy to clipboard operation
vscode-azurefunctions copied to clipboard

Color contrast ratio of keyboard focus present on "C#" control is 1.277:1 which is less than 3:1: A11y_Azure Function_Create new project_Non-text Contrast

Open kupatkar99 opened this issue 8 months ago • 4 comments

GIT Hub Tags:

#A11yTCS; #A11ySev2; #Azure Tools for VS Code; #BM_Azure Tools for VS Code_Win32_Nov2024; #DesktopApp; #A11yMAS; #WCAG1.4.11; #Non-text Contrast; #AILimited; #Win11; #FTP; #External; #External:VSCode; #FirstParty:Bug246460;

Environment and OS details:

Application name: Azure Tools for VS Code URL: Visual studio code

Reproduction Steps:

  1. Open Visual studio code
  2. TAB till extension button and press ENTER then search for "Azure Functions"
  3. TAB till install and press ENTER.
  4. TAB till "Azure" button and press ENTER.
  5. TAB till "Azure function" control and hit ENTER.
  6. TAB till "Create new project" control and hit ENTER.
  7. Open accessibility insights for windows and check color contrast ratio of keyboard focus on "C#".
  8. Observe the issue whether Color contrast ratio of keyboard focus present on "C#" control is less than 3:1 or not.

Actual behavior:

Color contrast ratio of keyboard focus present on "C#" control is 1.277:1 which is less than 3:1

Expected behavior:

Color contrast ratio of keyboard focus present on "C#" control should be greater than or equals to 3:1

User Impact:

Low vision users will not be able to understand where the keyboard focus is present if color contrast ratio will be less than 3:1.

Attachment:

Image

kupatkar99 avatar Apr 14 '25 05:04 kupatkar99

External bug ID:https://github.com/microsoft/vscode/issues/246460

kupatkar99 avatar Apr 14 '25 07:04 kupatkar99

GithubTags:#ResolvedByTT;

kupatkar99 avatar Apr 23 '25 12:04 kupatkar99

Not sure what theme you are using, but mine has the 21:1 ratio:

Image

jinglouMSFT avatar May 14 '25 23:05 jinglouMSFT

@jinglouMSFT The contrast ratio requirement is for non-text contrast ratios, rather than the text contrast ration. So in this case they're testing that the dark blue focus indication color is not different enough from the black background color. This may need to go to Office Hours, as I don't know if a decision has been made universally for this UI since the white text/blue background also indicates focus and meets the contrast ratio requirement. @scottaohara might be able to answer us here, but Office Hours may be quicker.

merriemcgaw avatar May 29 '25 00:05 merriemcgaw

Can we close this bug? This was externally filed on VS Code, and it seems that they have closed it as resolved so we should automatically pick up the fix as well.

nturinski avatar Jul 02 '25 18:07 nturinski

VSCode has resolved the linked bug, which we automatically inherit the fix. However, I am not sure if the fix really fixed the reported issue. If I am not mistaken, based on the proposed fix in the linked bug, the design was to increase the contrast between the text and the background. The reported bug is the contrast between the background and the keyboard focus border, which is still under 3:1 (In the dark theme. It's 2.846 : 1 as I ran the test today). @kupatkar99, can you please help verify if the external bug (linked above) actually resolved the issue you reported? If yes, then this bug should be also resolved and closed. Thanks.

jinglouMSFT avatar Jul 23 '25 23:07 jinglouMSFT

Issue is not reproducing hence closing the bug. Text is getting bold and from that user will be able to recognize the focus.

#closed;

Image

Yash14j avatar Jul 30 '25 12:07 Yash14j

Closing per above input.

jinglouMSFT avatar Jul 30 '25 17:07 jinglouMSFT