Fixed WCAG contrast ratio calculations to use sRGB to RGB formula

Author: Avid29

components/ColorAnalyzer/samples/ContrastHelper/ContrastHelperSampleBase.cs

@@ -13,13 +13,13 @@ namespace ColorAnalyzerExperiment.Samples;
 public abstract partial class ContrastHelperSampleBase : Page
 {
     public static readonly DependencyProperty DesiredBackgroundProperty =
-        DependencyProperty.Register(nameof(DesiredBackground), typeof(Color), typeof(TextBlockContrastSample), new PropertyMetadata(Colors.Black));
+        DependencyProperty.Register(nameof(DesiredBackground), typeof(Color), typeof(ContrastHelperSampleBase), new PropertyMetadata(Colors.Black));
 
     public static readonly DependencyProperty DesiredForegroundProperty =
-        DependencyProperty.Register(nameof(DesiredForeground), typeof(Color), typeof(TextBlockContrastSample), new PropertyMetadata(Colors.White));
+        DependencyProperty.Register(nameof(DesiredForeground), typeof(Color), typeof(ContrastHelperSampleBase), new PropertyMetadata(Colors.White));
 
     private static readonly DependencyProperty MinRatioProperty =
-        DependencyProperty.Register(nameof(MinRatio), typeof(double), typeof(TextBlockContrastSample), new PropertyMetadata(3d));
+        DependencyProperty.Register(nameof(MinRatio), typeof(double), typeof(ContrastHelperSampleBase), new PropertyMetadata(3d));
 
     public ContrastHelperSampleBase()
     {

components/ColorAnalyzer/src/ColorExtensions.cs

@@ -30,8 +30,8 @@ internal static double ContrastRatio(this Color color1, Color color2)
         // Source WCAG guidelines: https://www.w3.org/TR/WCAG20/#contrast-ratiodef
 
         // Calculate perceived luminance for both colors
-        double luminance1 = color1.PerceivedLuminance();
-        double luminance2 = color2.PerceivedLuminance();
+        double luminance1 = color1.RelativeLuminance();
+        double luminance2 = color2.RelativeLuminance();
 
         // Determine lighter and darker luminance
         double lighter = Math.Max(luminance1, luminance2);
@@ -41,11 +41,11 @@ internal static double ContrastRatio(this Color color1, Color color2)
         return (lighter + 0.05) / (darker + 0.05);
     }
 
-    internal static double PerceivedLuminance(this Color color)
+    internal static double RelativeLuminance(this Color color)
     {
         // Color theory is a massive iceberg. Here's a peek at the tippy top:
 
-        // There's two (main) standards for calculating luminance from RGB values.
+        // There's two (main) standards for calculating percieved luminance from RGB values.
 
         // + ------------- + ------------------------------------ + ------------------ + ------------------------------------------------------------------------------- +
         // | Standard      | Formula                              | Ref. Section       | Ref. Link                                                                       |
@@ -61,11 +61,26 @@ internal static double PerceivedLuminance(this Color color)
 
         // NOTE: If we for whatever reason we ever need to optimize this code,
         // we can make approximations using integer math instead of floating point math.
-        // The precise values are not critical, as long as the relative luminance is accurate.
+        // The precise values are not critical, as long as the proportions are similar and sum to 1.
         // Like so: return (2 * color.R + 7 * color.G + color.B);
 
+        // Adjust channels relative luminance out of sRGB:
+        // https://www.w3.org/WAI/GL/wiki/Relative_luminance#Definition_as_Stated_in_WCAG_2.x
+        float sRGBtoRGB(float s)
+        {
+            if (s <= 0.03928f)
+                return s / 12.92f;
+
+            return MathF.Pow(((s + 0.055f) / 1.055f), 2.4f);
+        }
+
+        var vec = color.ToVector3();
+        var r = sRGBtoRGB(vec.X);
+        var g = sRGBtoRGB(vec.Y);
+        var b = sRGBtoRGB(vec.Z);
+
         // TLDR: We use ITU Rec. 709 standard formula for perceived luminance.
-        return (0.2126f * color.R + 0.7152f * color.G + 0.0722 * color.B) / 255;
+        return (0.2126f * r + 0.7152f * g + 0.0722 * b);
     }
 
     internal static float FindColorfulness(this Color color)

components/ColorAnalyzer/src/ContrastHelper/ContrastHelper.cs

@@ -44,7 +44,7 @@ private static void ApplyContrastCheck(DependencyObject d)
 
         // Current contrast is too small.
         // Select either black or white backed on the opponent luminance
-        var luminance = opponent.PerceivedLuminance();
+        var luminance = opponent.RelativeLuminance();
         var contrastingColor = luminance < 0.5f ? Colors.White : Colors.Black;
         UpdateContrastedProperties(d, contrastingColor);
     }