Update background color of selected List View item to meet contrast ratio requirement

Describe the bug

Selected ListViewItems do not currently meet the 3:1 contrast ratio requirement relative to unselected items, as specified in MAS 1.4.11 - Non-text Contrast.

The selected color needs to be lighter in dark theme (currently it’s 2.2:1):

The selected color needs to be darker in light theme (currently it’s 1.8:1):

Additional context

Copied in part from an internal bug

Related to #1233

Proposed fix

https://github.com/microsoft/microsoft-ui-xaml/issues/2908#issuecomment-659632415

[Felix-Dev]

I would add the proposed brush like this then if nobody else is currently working on it:

<ResourceDictionary x:Key="Light">
    <SolidColorBrush x:Key="SystemControlHighlightListAccentMediumLowBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.75" />
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
    <SolidColorBrush x:Key="SystemControlHighlightListAccentMediumLowBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.75" />
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
    <SolidColorBrush x:Key="SystemControlHighlightListAccentMediumLowBrush" Color="{ThemeResource SystemColorHighlightColor}" />
</ResourceDictionary>

<StaticResource x:Key="ListViewItemBackgroundSelected" ResourceKey="SystemControlHighlightListAccentMediumLowBrush" />

@YuliKl As for the color contrast between selection rets and selection hover states in dark mode: Could we follow the color scheme used by the default button?

In our ListView case, that could for example look like this then:

We would use the following brushes here:

<StaticResource x:Key="ListViewItemBackgroundSelected" ResourceKey="SystemControlHighlightListAccentMediumLowBrush" />
<StaticResource x:Key="ListViewItemBackgroundSelectedPointerOver" ResourceKey="SystemControlHighlightListAccentLowBrush" />
<StaticResource x:Key="ListViewItemBackgroundSelectedPressed" ResourceKey="SystemControlHighlightListAccentHighBrush" />

<SolidColorBrush x:Key="SystemControlHighlightListAccentMediumLowBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.75" />
<SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.6" />
<SolidColorBrush x:Key="SystemControlHighlightListAccentHighBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.9" />

We would thus use your proposed brush for the the selection rest state and use the former brush used in the selected rest state (with opacity 0.6) now for the selected hover state. The brush used for the selected pressed state would remain unchanged. Effectively, we will have these opacity differences:

• selected rest: 0.75
• selected hover: 0.6 (this is 0.8 currently)
• selected pressed: 0.9

Would reusing the former selected rest brush with opacity 0.6 for the selected hover state be a valid 3:1 contrast ratio concern relative to unselected ListViewItems as well?

(The brushes used in Light mode and High-contrast mode would also remain unchanged as of now.)

[StephenLPeters]

@StephenLPeters Have you heard any concerns about moving Common_themeresources to the CommonStyles folder?

I haven’t heard concerns and I think updating it would make sense.