DYN-4734 Contrast ratio between a group background and group text fix (#13682)

dnenov · web-flow · commit 08a2a32f4d06 · 2023-01-20T15:16:54.000-05:00
- now measures the current group text to group background contrast ratio and adjusts text color according to the group background color, so good contrast is maintained
diff --git a/src/DynamoCoreWpf/UI/Converters.cs b/src/DynamoCoreWpf/UI/Converters.cs
@@ -10,6 +10,7 @@
 using System.Windows.Controls.Primitives;
 using System.Windows.Data;
 using System.Windows.Media;
+using System.Windows.Media.Animation;
 using Dynamo.Configuration;
 using Dynamo.Graph.Nodes;
 using Dynamo.Graph.Workspaces;
@@ -3566,4 +3567,58 @@ public object ConvertBack(object value, Type targetType, object parameter, Syste
 
         #endregion
     }
+
+    /// <summary>
+    /// Returns a dark or light color depending on the contrast ration of the color with the background color
+    /// Contrast ration should be larger than 4.5:1
+    /// Contrast calculation algorithm from https://stackoverflow.com/questions/70187918/adapt-given-color-pairs-to-adhere-to-w3c-accessibility-standard-for-epubs/70192373#70192373
+    /// </summary>
+    public class TextForegroundSaturationColorConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            var lightColor = (System.Windows.Media.Color)SharedDictionaryManager.DynamoColorsAndBrushesDictionary["WhiteColor"];
+            var darkColor = (System.Windows.Media.Color)SharedDictionaryManager.DynamoColorsAndBrushesDictionary["DarkerGrey"];
+
+            var backgroundColor = (System.Windows.Media.Color)value;
+
+            var contrastRatio = GetContrastRatio(darkColor, backgroundColor);
+
+            return contrastRatio < 4.5 ? new SolidColorBrush(lightColor) : new SolidColorBrush(darkColor);
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter,
+          CultureInfo culture)
+        {
+            return null;
+        }
+
+        private double GetContrastRatio(System.Windows.Media.Color foreground, System.Windows.Media.Color background)
+        {
+            double L1 = GetRelativeLuminance(foreground);
+            double L2 = GetRelativeLuminance(background);
+
+            var result = L1 > L2 ? (L1 + 0.05) / (L2 + 0.05) : (L2 + 0.05) / (L1 + 0.05);
+
+            return result;
+        }
+
+        private double GetRelativeLuminance(System.Windows.Media.Color color)
+        {
+            var R = color.R / 255.0;
+            var G = color.G / 255.0;
+            var B = color.B / 255.0;
+
+            if (R < 0.03928) R = R / 12.92;
+            else R = Math.Pow((R + 0.055) / 1.055, 2.4);
+
+            if (G < 0.03928) G = G / 12.92;
+            else G = Math.Pow((G + 0.055) / 1.055, 2.4);
+
+            if (B < 0.03928) B = B / 12.92;
+            else B = Math.Pow((B + 0.055) / 1.055, 2.4);
+
+            return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+        }
+    }
 }
diff --git a/src/DynamoCoreWpf/UI/Themes/Modern/DynamoColorsAndBrushes.xaml b/src/DynamoCoreWpf/UI/Themes/Modern/DynamoColorsAndBrushes.xaml
@@ -1,4 +1,4 @@
-﻿<ResourceDictionary xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
 
     <!--  a good color picker  -->
     <!--  https://www.colorspire.com/rgb-color-wheel/  -->
@@ -31,6 +31,8 @@
     <Color x:Key="HoverFontColor">#1AFFFFFF</Color>
     <Color x:Key="PressedFontColor">#2EFFFFFF</Color>
     <Color x:Key="DisabledFontColor">#66999999</Color>
+    <Color x:Key="WhiteColor">#F5F5F5</Color>
+    
 
     <!--  Autodesk Colors  -->
     <SolidColorBrush x:Key="PrimaryCharcoal100Brush" Color="{StaticResource PrimaryCharcoal100}" />
@@ -188,4 +190,4 @@
     <!--  TextBlock Link  -->
     <SolidColorBrush x:Key="TextBlockLinkForegroundColor" Color="{StaticResource Blue350}" />
     
-</ResourceDictionary>
+</ResourceDictionary>
diff --git a/src/DynamoCoreWpf/UI/Themes/Modern/DynamoConverters.xaml b/src/DynamoCoreWpf/UI/Themes/Modern/DynamoConverters.xaml
@@ -186,4 +186,5 @@
     <controls:CollectionHasMoreThanNItemsToBoolConverter x:Key="CollectionHasMoreThanNItemsToBoolConverter" />
     <controls:ListHasMoreThanNItemsToVisibilityConverter x:Key="ListHasMoreThanNItemsToVisibilityConverter" />
     <controls:ObjectTypeConverter x:Key="ObjectTypeConverter" />
+    <controls:TextForegroundSaturationColorConverter x:Key="TextForegroundSaturationColorConverter" />
 </ResourceDictionary>
diff --git a/src/DynamoCoreWpf/Views/Core/AnnotationView.xaml b/src/DynamoCoreWpf/Views/Core/AnnotationView.xaml
@@ -28,6 +28,7 @@
     <UserControl.Resources>
         <utilities:GroupStyleItemSelector x:Key="GroupStyleItemSelector"/>
         <controls:StringToBrushColorConverter x:Key="StringToBrushColorConverter"/>
+        <controls:TextForegroundSaturationColorConverter x:Key="TextForegroundSaturationColorConverter"/>
         <CornerRadius x:Key="ExpanderCornerRadius"
                       TopLeft="10"
                       TopRight="10" />
@@ -582,6 +583,7 @@
                         <Grid Margin="0,0,20,0">
                             <TextBlock x:Name="GroupTextBlock"
                                        Text="{Binding AnnotationText, Converter={StaticResource AnnotationTextConverter}, ConverterParameter='TextBlock'}"
+                                       Foreground="{Binding Background, Converter={StaticResource TextForegroundSaturationColorConverter}}"
                                        FontFamily="Trebuchet"
                                        FontSize="{Binding FontSize}"
                                        LineStackingStrategy="BlockLineHeight"
@@ -613,6 +615,7 @@
                         <Grid>
                             <TextBlock x:Name="GroupDescriptionTextBlock"
                                        Text="{Binding AnnotationDescriptionText, Converter={StaticResource AnnotationTextConverter}}"
+                                       Foreground="{Binding Background, Converter={StaticResource TextForegroundSaturationColorConverter}}"
                                        FontFamily="Trebuchet"
                                        FontSize="12"
                                        LineStackingStrategy="BlockLineHeight"
