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

TabView themes aren't accessible #1901

Open
cinnamon-msft opened this issue Jan 28, 2020 · 9 comments
Open

TabView themes aren't accessible #1901

cinnamon-msft opened this issue Jan 28, 2020 · 9 comments
Assignees
Labels
bug Something isn't working needs-assignee-attention Assignee needs to follow-up or investigate this issue team-Controls Issue for the Controls team

Comments

@cinnamon-msft
Copy link

Describe the bug

Due to the lack of contrast, it's difficult to determine which tab is the active tab. Additionally, the color contrast ratios between the active tab and the tab bar aren't great enough to meet accessibility needs.

Minimum requirement for accessibility is 3:1 ratio.

Steps to reproduce the bug

  1. Open Accessibility Insights for Windows Tool
  2. Run Color Contrast Analyzer on the tabs

Expected behavior

A resulting ratio of 3:1 or higher.

Screenshots

image
Light theme has a color contrast ratio of 1.605:1

image
Dark theme has a color contrast ratio of 1.662:1

Version Info

NuGet package version:

Windows 10 version Saw the problem?
Insider Build (xxxxx)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)
Device form factor Saw the problem?
Desktop
Mobile
Xbox
Surface Hub
IoT

Additional context

@msft-github-bot msft-github-bot added the needs-triage Issue needs to be triaged by the area owners label Jan 28, 2020
@ranjeshj
Copy link
Contributor

@stmoy, can you please follow up on this one ?

@ranjeshj ranjeshj added needs-assignee-attention Assignee needs to follow-up or investigate this issue and removed needs-triage Issue needs to be triaged by the area owners labels Jan 28, 2020
@stmoy
Copy link
Contributor

stmoy commented Jan 29, 2020

Good news: The WinUI TabView has better contrast than Edge
Bad news: Edge is also not compliant
Good news: They are aware, and investigating how to fix this

There are fundamental constraints in place within the color ramp that make it difficult to get enough visibility between selected and unselected tabs using color alone. It's possible that we'll need to use another affordance to help increase the visibility (like text weight, shape, etc.) instead of color contrast.

I'm following up internally. For now lets "push pause" on this issue.

@LasseRosenow
Copy link

I think it would already be much better if the selected tab is brighter than the unselected one in dark mode like it is done in edge. Its weird that the foreground is supposed to be darker than the background.

Also the tabbar could be made acrylic like the old edge.

@mdtauk
Copy link
Contributor

mdtauk commented May 20, 2020

Eventually all the Light and Dark theme resources should be reviewed, and Accessibility contrast-ratios should be adhered to. #920

For now, can someone from the design team audit it, or checks done to ensure the design specs are being matched in the Xaml Resources?

@marcelwgn
Copy link
Contributor

marcelwgn commented Aug 23, 2020

Using the darkest/lightest color that would ensure a 3:1 contrast ratio, we would get the following:

Light theme (with background using #949494)
image

Dark theme (with background being #5A5A5A):
image

While I think that dark theme looks better as it is definitely easier to decern the selected item from the rest. However for light theme, in my opinion, the background looks too dark for a light theme.

@stmoy @mdtauk What are your thoughts on this?

@mdtauk
Copy link
Contributor

mdtauk commented Aug 23, 2020

It may be worth considering adding a Selection Indicator of some kind. Strict adherence to contrast ratios would lead to colours that I think many would complain about.

High contrast themes will of course handle these controls in a responsible way.

I suspect the Edge team will lead the way with the design, but WinUI can deviate where needed, and the Windows Terminal team may have some thoughts.

@marcelwgn
Copy link
Contributor

Having a selection indicator is also an interesting idea, though it's a bit uncommon for this kind of control I would say.

Regarding Edge, the way it behaves on my machine is the following (not sure if this is currently the default or not):

image

With having a non gray background, we would easily be able to meet contrast ratios, though that would look even worse in a lot of scenarios than using a darker/lighter gray.

@bpulliam bpulliam added the team-Controls Issue for the Controls team label Oct 30, 2022
@zadjii-msft
Copy link
Member

Hey whoever triages winui these days - @gabbybilka maybe? I'm pretty sure this is super stale.

Admittedly, Not sure how this held up with the Mica/MicaAlt changes. This may need to be re-framed in that context. Or hey maybe the default TabView themes are accessible these days?

@mdtauk
Copy link
Contributor

mdtauk commented Mar 8, 2023

I think this issue was solved with the move to WinUI 3 - but I will post some thoughts anyway

The selected tab's text uses Semibold instead of the Regular weight, to help with this. This should hopefully be sufficient.
image

Also it was mentioned previously that a selection indicator is uncommon - this is true, but Microsoft has done this in the past.
image

Google's Material Design does this too
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs-assignee-attention Assignee needs to follow-up or investigate this issue team-Controls Issue for the Controls team
Projects
None yet
Development

No branches or pull requests

10 participants