ContrastHelper

components/ColorAnalyzer/samples/AccentAnalyzer.md

@@ -17,3 +17,5 @@ icon: assets/icon.png
 The AccentAnalyzer provides a pure XAML way to use the colors extracted from an image as a binding source for any `Color` property.
 
 > [!Sample AccentAnalyzerSample]
+
+> [!Sample ContrastHelperSample]

components/ColorAnalyzer/samples/AccentAnalyzerSample.xaml

@@ -25,7 +25,7 @@
                     VerticalAlignment="Center">
             <Image x:Name="AccentedImage"
                    HorizontalAlignment="Center"
-                   Source="/ColorAnalyzerExperiment.Samples/Assets/StockImages/Bloom.jpg"
+                   Source="/ColorAnalyzerExperiment.Samples/Assets/StockImages/Flowers.jpg"
                    Stretch="Uniform">
                 <interactivity:Interaction.Behaviors>
                     <interactivity:EventTriggerBehavior EventName="ImageOpened">
@@ -62,7 +62,7 @@
                 <Border.Background>
                     <SolidColorBrush Color="{x:Bind AccentAnalyzer.DominantColor, Mode=OneWay}" />
                 </Border.Background>
-                <TextBlock Foreground="Black"
+                <TextBlock helpers:ContrastHelper.Opponent="{x:Bind AccentAnalyzer.DominantColor, Mode=OneWay}"
                            Text="Dominant" />
             </Border>
 
@@ -74,8 +74,14 @@
                 <Border.Background>
                     <SolidColorBrush Color="{x:Bind AccentAnalyzer.BaseColor, Mode=OneWay}" />
                 </Border.Background>
-                <TextBlock Foreground="Black"
-                           Text="Base" />
+                <TextBlock Text="Base">
+                    <TextBlock.Foreground>
+                        <!--  ConstrastHelper used to auto-adjust text Foreground against the dynamic background per WCAG  -->
+                        <SolidColorBrush helpers:ContrastHelper.MinRatio="5"
+                                         helpers:ContrastHelper.Opponent="{x:Bind AccentAnalyzer.BaseColor, Mode=OneWay}"
+                                         Color="{x:Bind AccentAnalyzer.PrimaryAccentColor, Mode=OneWay}" />
+                    </TextBlock.Foreground>
+                </TextBlock>
             </Border>
 
             <!--  Primary  -->
@@ -86,7 +92,7 @@
                 <Border.Background>
                     <SolidColorBrush Color="{x:Bind AccentAnalyzer.PrimaryAccentColor, Mode=OneWay}" />
                 </Border.Background>
-                <TextBlock Foreground="Black"
+                <TextBlock helpers:ContrastHelper.Opponent="{x:Bind AccentAnalyzer.PrimaryAccentColor, Mode=OneWay}"
                            Text="Primary" />
             </Border>
             <!--  Secondary  -->
@@ -97,7 +103,7 @@
                 <Border.Background>
                     <SolidColorBrush Color="{x:Bind AccentAnalyzer.SecondaryAccentColor, Mode=OneWay}" />
                 </Border.Background>
-                <TextBlock Foreground="Black"
+                <TextBlock helpers:ContrastHelper.Opponent="{x:Bind AccentAnalyzer.SecondaryAccentColor, Mode=OneWay}"
                            Text="Secondary" />
             </Border>
             <!--  Tertiary  -->
@@ -108,7 +114,7 @@
                 <Border.Background>
                     <SolidColorBrush Color="{x:Bind AccentAnalyzer.TertiaryAccentColor, Mode=OneWay}" />
                 </Border.Background>
-                <TextBlock Foreground="Black"
+                <TextBlock helpers:ContrastHelper.Opponent="{x:Bind AccentAnalyzer.TertiaryAccentColor, Mode=OneWay}"
                            Text="Tertiary" />
             </Border>
 

components/ColorAnalyzer/samples/ContrastHelperSample.xaml

@@ -0,0 +1,39 @@
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<Page x:Class="ColorAnalyzerExperiment.Samples.ContrastHelperSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:helpers="using:CommunityToolkit.WinUI.Helpers"
+      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+      xmlns:local="using:ColorAnalyzerExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+    <Page.Background>
+        <SolidColorBrush Color="{x:Bind DesiredBackground, Mode=OneWay}" />
+    </Page.Background>
+
+    <StackPanel Padding="20"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Top"
+                Spacing="2">
+        <TextBlock x:Name="TextSample"
+                   helpers:ContrastHelper.MinRatio="{x:Bind MinRatio, Mode=OneWay}"
+                   helpers:ContrastHelper.Opponent="{x:Bind DesiredBackground, Mode=OneWay}"
+                   FontSize="24"
+                   Text="Legible Text">
+            <TextBlock.Foreground>
+                <SolidColorBrush Color="{x:Bind DesiredForeground, Mode=OneWay}" />
+            </TextBlock.Foreground>
+        </TextBlock>
+        <Rectangle x:Name="ShapeSample"
+                   Width="28"
+                   Height="28">
+            <Rectangle.Stroke>
+                <SolidColorBrush helpers:ContrastHelper.MinRatio="{x:Bind MinRatio, Mode=OneWay}"
+                                 helpers:ContrastHelper.Opponent="{x:Bind DesiredBackground, Mode=OneWay}"
+                                 Color="{x:Bind DesiredForeground, Mode=OneWay}" />
+            </Rectangle.Stroke>
+        </Rectangle>
+    </StackPanel>
+</Page>

components/ColorAnalyzer/samples/ContrastHelperSample.xaml.cs

@@ -0,0 +1,47 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.UI;
+using Windows.UI;
+
+namespace ColorAnalyzerExperiment.Samples;
+
+/// <summary>
+/// An example sample page of a custom control inheriting from Panel.
+/// </summary>
+[ToolkitSample(id: nameof(ContrastHelperSample), "ContrastAnalyzer helper", description: $"A sample for showing how the contrast analyzer can be used.")]
+public sealed partial class ContrastHelperSample : Page
+{
+    public static readonly DependencyProperty DesiredBackgroundProperty =
+        DependencyProperty.Register(nameof(DesiredBackground), typeof(Color), typeof(ContrastHelperSample), new PropertyMetadata(Colors.Black));
+
+    public static readonly DependencyProperty DesiredForegroundProperty =
+        DependencyProperty.Register(nameof(DesiredForeground), typeof(Color), typeof(ContrastHelperSample), new PropertyMetadata(Colors.White));
+
+    private static readonly DependencyProperty MinRatioProperty =
+        DependencyProperty.Register(nameof(MinRatio), typeof(double), typeof(ContrastHelperSample), new PropertyMetadata(0d));
+
+    public Color DesiredBackground
+    {
+        get => (Color)GetValue(DesiredBackgroundProperty);
+        set => SetValue(DesiredBackgroundProperty, value);
+    }
+
+    public Color DesiredForeground
+    {
+        get => (Color)GetValue(DesiredForegroundProperty);
+        set => SetValue(DesiredForegroundProperty, value);
+    }
+
+    public double MinRatio
+    {
+        get => (double)GetValue(MinRatioProperty);
+        set => SetValue(MinRatioProperty, value);
+    }
+
+    public ContrastHelperSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/ColorAnalyzer/samples/ContrastOptionsPane.xaml

@@ -0,0 +1,41 @@
+<UserControl x:Class="ColorAnalyzerExperiment.Samples.ContrastOptionsPane"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:local="using:ColorAnalyzerExperiment.Samples"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d">
+
+    <StackPanel Spacing="2">
+        <TextBlock Text="Desired Foreground" />
+        <controls:ColorPicker ColorChanged="Foreground_ColorChanged"
+                              IsColorChannelTextInputVisible="True"
+                              IsColorSliderVisible="True"
+                              Color="White" />
+
+        <TextBlock Text="Background" />
+        <controls:ColorPicker ColorChanged="Background_ColorChanged"
+                              IsColorChannelTextInputVisible="True"
+                              IsColorSliderVisible="True"
+                              Color="Black" />
+
+        <Slider Header="Minimum Ratio"
+                Maximum="21"
+                Minimum="1"
+                ValueChanged="Ratio_ValueChanged"
+                Value="3" />
+
+        <Slider Header="Font Size"
+                Maximum="48"
+                Minimum="8"
+                ValueChanged="FontSize_ValueChanged"
+                Value="18" />
+
+        <Slider Header="Stroke Thickness"
+                Maximum="8"
+                Minimum="0"
+                ValueChanged="Thickness_ValueChanged"
+                Value="4" />
+    </StackPanel>
+</UserControl>

components/ColorAnalyzer/samples/ContrastOptionsPane.xaml.cs

@@ -0,0 +1,59 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+#if !WINDOWS_UWP
+using Microsoft.UI.Xaml.Media.Imaging;
+#elif WINDOWS_UWP
+using Windows.UI.Xaml.Media.Imaging;
+#endif
+
+namespace ColorAnalyzerExperiment.Samples;
+
+[ToolkitSampleOptionsPane(nameof(ContrastHelperSample))]
+public partial class ContrastOptionsPane : UserControl
+{
+    private ContrastHelperSample _sample;
+    private ContrastHelperSample.XamlNamedPropertyRelay _sampleXamlRelay;
+
+    public ContrastOptionsPane(ContrastHelperSample sample)
+    {
+        _sample = sample;
+        _sampleXamlRelay = new ContrastHelperSample.XamlNamedPropertyRelay(sample);
+
+        this.InitializeComponent();
+    }
+
+    private void Foreground_ColorChanged(MUXC.ColorPicker sender, MUXC.ColorChangedEventArgs args)
+    {
+        // TODO: Disect the colorpicker
+        if (args.NewColor.A != 255)
+            return;
+
+        _sample.DesiredForeground = args.NewColor;
+    }
+
+    private void Background_ColorChanged(MUXC.ColorPicker sender, MUXC.ColorChangedEventArgs args)
+    {
+        // TODO: Disect the colorpicker
+        if (args.NewColor.A != 255)
+            return;
+
+        _sample.DesiredBackground = args.NewColor;
+    }
+
+    private void Ratio_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
+    {
+        _sample.MinRatio = (double)e.NewValue;
+    }
+
+    private void FontSize_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
+    {
+        _sampleXamlRelay.TextSample.FontSize = (double)e.NewValue;
+    }
+
+    private void Thickness_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
+    {
+        _sampleXamlRelay.ShapeSample.StrokeThickness = (double)e.NewValue;
+    }
+}

components/ColorAnalyzer/samples/Dependencies.props

@@ -13,10 +13,12 @@
     <ItemGroup Condition="'$(WinUIMajorVersion)' == '2'">
         <!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
       <PackageReference Include="CommunityToolkit.Uwp.Behaviors" Version="8.2.250402"/>
+      <PackageReference Include="CommunityToolkit.Uwp.Controls.ColorPicker" Version="8.2.250402"/>
     </ItemGroup>
 
     <!-- WinUI 3 -->
     <ItemGroup Condition="'$(WinUIMajorVersion)' == '3'">
       <PackageReference Include="CommunityToolkit.WinUI.Behaviors" Version="8.2.250402"/>
+      <PackageReference Include="CommunityToolkit.WinUI.Controls.ColorPicker" Version="8.2.250402"/>
     </ItemGroup>
 </Project>

components/ColorAnalyzer/src/AccentAnalyzer.cs

@@ -17,7 +17,7 @@
 namespace CommunityToolkit.WinUI.Helpers;
 
 /// <summary>
-/// A resource that can be used to extract color palettes out of any UIElement.
+/// A resource that can be used to extract color palettes out of any <see cref="UIElement"/>.
 /// </summary>
 public partial class AccentAnalyzer : DependencyObject
 {