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.

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

Focus color contrast ratio for non text element is less than 3:1. #99244

Closed
RohitJadhav-TCS opened this issue Jun 3, 2020 · 9 comments
Closed
Assignees
Labels
a11ymas Issue from accessibility team accessibility Keyboard, mouse, ARIA, vision, screen readers (non-specific) issues bug Issue identified by VS Code Team member as probable bug insiders-released Patch has been released in VS Code Insiders themes Color theme issues verified Verification succeeded windows VS Code on Windows issues
Milestone

Comments

@RohitJadhav-TCS
Copy link

RohitJadhav-TCS commented Jun 3, 2020

Environment Details:
VSCode Version : 1.46.0 Insider
OS Version : Win10
Additional Details:
Screenreader: NVDA[2019.3.1], JAWS[2020.70]

GitHubTags:#A11ySev2;#A11yTCS;#A11yMAS;#Benchmark;#DesktopApp;#MAS1.4.11;#Win10;#Visual Studio Code;#CAITestPass_May2020;#FTP;

Repro Steps:
1.Open Visual studio code insider editor.
2.Using "Ctrl+`" key open the Integrated Terminals.
3)Using "Ctrl+" key to split the terminal
4)Navigate to Spilt terminal icon using tab and turn on color contrast analyzer.

Steps to Reproduce:

Actual:
Contrast ratio of focus line when it is on Spilt screen icon is less that 3:1.

Expected:
Color contrast ration of non text contrast content should be more that 3:1

Attachment For Reference:
99244_A11y_VSCode_Integrated Terminal_Split terminal_Keyboard Color contrast ratio for non text element is less than 31

Does this issue occur when all extensions are disabled?: Yes/No

@Tyriar
Copy link
Member

Tyriar commented Jun 3, 2020

If this is a requirement for this non-text part, then it doesn't just affect the panel actions:

image

1.81:1:

image

@Tyriar Tyriar assigned isidorn and miguelsolorio and unassigned Tyriar Jun 3, 2020
@Tyriar Tyriar added the accessibility Keyboard, mouse, ARIA, vision, screen readers (non-specific) issues label Jun 3, 2020
@isidorn isidorn changed the title A11y_VSCode_Integrated Terminal_Split terminal_Keyboard: Color contrast ratio for non text element is less than 3:1. Panel: Color contrast ratio for non text element is less than 3:1. Jun 3, 2020
@isidorn
Copy link
Contributor

isidorn commented Jun 3, 2020

This is regarding color contrast of icons.
@misolori and me are having a disucssion and we will decide what to do here.

@isidorn isidorn added the under-discussion Issue is under discussion for relevance, priority, approach label Jun 3, 2020
@miguelsolorio
Copy link
Contributor

I think in this case it’s referring to the focus border color.

@isidorn isidorn changed the title Panel: Color contrast ratio for non text element is less than 3:1. Panel: Focus color contrast ratio for non text element is less than 3:1. Jun 3, 2020
@isidorn
Copy link
Contributor

isidorn commented Jun 3, 2020

You are correct. Renamed the issue.

@miguelsolorio miguelsolorio changed the title Panel: Focus color contrast ratio for non text element is less than 3:1. Focus color contrast ratio for non text element is less than 3:1. Jun 5, 2020
@miguelsolorio miguelsolorio added the themes Color theme issues label Jun 5, 2020
@miguelsolorio miguelsolorio added this to the Backlog milestone Jun 5, 2020
@miguelsolorio
Copy link
Contributor

Updated this issue to reflect all focus treatments in all areas (from #99426) like Activity Bar, Sidebar, Tabs, etc.

@miguelsolorio
Copy link
Contributor

@isidorn in order for us to properly fix this issue, we'll need to make sure that the focus border color passes the 3:1 ratio on our lightest background (in this case it's the activity bar). After playing with the blue color, it appears that #007FD4 is the one that will pass the contrast ratio, but that color is significantly brighter than before (which personally I am fine with).

image

Kapture 2020-06-12 at 13 50 22

@isidorn
Copy link
Contributor

isidorn commented Jun 15, 2020

@misolori thanks for looking into this and for finding a good color. I think the focus being more visible is perfectly fine, and the new color still blends well with everything. I personally prefer it to the previous one, simply because it makes the focus more clear.
So feel free to push this, especialy since this is a start of the iteration so we get feedback.

fyi @bpasero

@isidorn isidorn modified the milestones: Backlog, June 2020 Jun 15, 2020
@isidorn isidorn added bug Issue identified by VS Code Team member as probable bug and removed under-discussion Issue is under discussion for relevance, priority, approach labels Jun 15, 2020
@miguelsolorio
Copy link
Contributor

Will add this today and we can gauge the feedback. This also applies to our Light theme, so will update that color to #0090F1

Kapture 2020-06-15 at 9 28 04

@isidorn
Copy link
Contributor

isidorn commented Jun 15, 2020

Great, also works for me in Light.

@RMacfarlane RMacfarlane added the verified Verification succeeded label Jul 2, 2020
@github-actions github-actions bot locked and limited conversation to collaborators Jul 30, 2020
@isidorn isidorn added windows VS Code on Windows issues a11ymas Issue from accessibility team labels Jan 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a11ymas Issue from accessibility team accessibility Keyboard, mouse, ARIA, vision, screen readers (non-specific) issues bug Issue identified by VS Code Team member as probable bug insiders-released Patch has been released in VS Code Insiders themes Color theme issues verified Verification succeeded windows VS Code on Windows issues
Projects
None yet
Development

No branches or pull requests

6 participants
@isidorn @Tyriar @RMacfarlane @miguelsolorio @RohitJadhav-TCS and others