TabView themes aren't accessible

[cinnamon-msft]

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

Light theme has a color contrast ratio of 1.605:1

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

[ranjeshj]

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

[stmoy]

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]

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]

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]

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

Light theme (with background using #949494)

Dark theme (with background being #5A5A5A):

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]

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]

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):

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.

[zadjii-msft]

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]

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.

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

Google's Material Design does this too