Contrast issues in Fluent color scheme

[christian-clausen]

Description

It seems there is something fundamentally wrong with the color scheme. One example is CardBackgroundFillColorDefault versus CardBackgroundFillColorSecondary.

In both dark and light mode, when changing from Default to Secondary, the (background) color gets darker.

Consequently, when changing from Default to Secondary, the contrast between text and background increases in dark mode and decreases in light mode.

The consequence of this is that if we want a certain UI design to have higher contrast in both dark and light modes, we cannot use these built-in definitions, but need to define our own, theme-dependent color scheme.

Reproduction Steps

1. Create a WPF app with Fluent enabled, and add this to the main window:

<Border
    Background="{DynamicResource CardBackgroundFillColorDefaultBrush}"
    BorderBrush="Blue"
    BorderThickness="1"
    Height="60"
    Width="100">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Foreground="{DynamicResource TextFillColorSecondaryBrush}" Text="Hello World" />
    </StackPanel>
</Border>

2. Set Windows colors to Dark
3. Set border background to CardBackgroundFillColorDefaultBrush and run
4. Set border background to CardBackgroundFillColorSecondaryBrush and run
5. Set Windows colors to Light
6. Set border background to CardBackgroundFillColorDefaultBrush and run
7. Set border background to CardBackgroundFillColorSecondaryBrush and run

Expected behavior

If Secondary is darker than Default in dark mode, then Secondary should lighter than Default in light mode.

Actual behavior

Secondary is darker than Default in both dark mode and light mode.

Here follows screenshots of code and results. All examples use the same text brush, TextFillColorSecondaryBrush and varies border background from Default to Secondary in dark mode and then light mode.

Dark mode and border background CardBackgroundFillColorDefaultBrush:

Dark mode and border background CardBackgroundFillColorSecondaryBrush:

Light mode and border background CardBackgroundFillColorDefaultBrush:

Light mode and border background CardBackgroundFillColorSecondaryBrush:

Regression?

Not really because this is the first version of the Windows 11 Theme, but I did compare to WinUI where the color definitions are different.

In WinUI there seems to be a single definition covering both light and dark modes with alpha taking care of consistency:

In WPF Fluent, light mode equals WinUI:

But the dark mode is different:

Known Workarounds

Define our own theme-dependent color scheme.

Impact

This impacts everyone developing WPF apps with Windows 11 theming leading to lower developer productivity. When contrast issues are not discovered during development and quality assurance, this leads to WPF app solution accessibility issues for end users.

Configuration

C:\tmp>dotnet --info
.NET SDK:
 Version:           9.0.100
 Commit:            59db016f11
 Workload version:  9.0.100-manifests.4a280210
 MSBuild version:   17.12.7+5b8665660

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.19045
 OS Platform: Windows
 RID:         win-x64
 Base Path:   C:\Program Files\dotnet\sdk\9.0.100\

Other information

No response

[siagupta0202]

I believe WinUI also has different definitions for light and dark mode and not just a single definition. Moreover, the color values match both in WinUI and WPF

Dark mode for WinUI - microsoft-ui-xaml/src/controls/dev/CommonStyles/Common_themeresources_any.xaml at main · microsoft/microsoft-ui-xaml

Light mode for WinUI - microsoft-ui-xaml/src/controls/dev/CommonStyles/Common_themeresources_any.xaml at main · microsoft/microsoft-ui-xaml

[christian-clausen]

Yes, you are right, I did not notice that the Common XAML file defined multiple resource dictionaries. So probably WinUI has a similar issue.

[siagupta0202]

@christian-clausen If you want the controls to have a higher contrast ratio, you can use TextFillColorPrimaryBrush and CardBackgroundFillColorDefaultBrush for your control. If there is a constraint that you cannot use TextFillColorPrimaryBrush, then you can take a look at the rest of the resources, probably another combination will be a better fit for your scenario.

Since we are aligning our behavior to that of WinUI's which it seems to be doing as in both the Secondary seems to be darker than Default (in both light and dark mode), this is not a bug as such with the resources.

If there are any more queries, please feel free to put them here or else can we go ahead and consider this as closed?