microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
163.18k stars 28.84k forks source link

Codelense on light theme is less than 4.5:1. #126899

Closed prasadaps closed 3 years ago

prasadaps commented 3 years ago

Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.

GitHubTags:#A11y_VSCode;#A11ySev3;#A11yTCS;#A11yWCAG;#DesktopApp;#Visual Studio Code Client;#ColorContrast;#WCAG1.4.3;#DesktopApp;#Win10;#VisualStudioCode-Win32-Apr2021;

2717_A11y_AzureStreamAnalyticsToolsForVisualStudioCode_Input_SelectSubscription_ColorContrast

Environment details:

Application Name: Azure Stream Analytics Tools for Visual Studio Code Windows Version: Win10 Visual studio code version : -1.55.1(User Setup)

Repro Steps:

  1. Launch Visual Studio code application with installed Azure Stream Analytics Tools extension .
  2. Tab to "Explorer" section in activity bar.
  3. Press control +shift +P and edit bar will appear.
  4. Type "ASA:Create new project" and press enter to create project.
  5. New project will get created.
  6. Tab to Input item in Project Tree Section
  7. Right click on input and navigate to "ASA : Add Input" using arrow key and press enter.
  8. Select IoT hub from available option using enter key.
  9. Select "select from azure subscriptions" from available option using enter key.
  10. Type any name for input file and press enter to create Input json file.
  11. Tab to "Select Subscription" button.
  12. Start AI4D tool and check the color contrast ratio of select subscription text.

Actual Result:

The color contrast ratio of the text "Select Subscription" button available in input json file is less than 4.5:1.

Note: - This issue is also observed with "Select IoT Hub", "Select Shared Access Policy name" text

Expected Result:

The color contrast ratio of the text "Select Subscription" button available in input json file should be greater than or equal to 4.5:1.

User Impact:

The low vision users may not able to see the "Select Subscription" text available in the input json file.

Attachment:

A11y_AzureStreamAnalyticsToolsForVisualStudioCode_Input_SelectSubscription_ColorContrast.zip

miguelsolorio commented 3 years ago

We'd have to use something that's at least as strong as #767676:

CleanShot 2021-06-22 at 06 36 38@2x CleanShot 2021-06-22 at 06 37 28@2x
isidorn commented 3 years ago

@prasadaps thanks for creating this issue.

Since the code lens is designed to be not annoying, I suggest that we go with the minimum required contrast of 3:1. Not the recommend contrast of 4.5:1 More about required contrast ratios can be found here

@misolori can you maybe find a less strong color that passes 3:1 contrast ratio and we see how that looks?

miguelsolorio commented 3 years ago

I've tweaked the light theme colors to be at least 3:1, so going from #999999 => #919191:

CleanShot 2021-06-28 at 11 28 18@2x