Properly implement alpha channels

Author: vmcj

webapp/src/Twig/TwigExtension.php

@@ -1155,6 +1155,57 @@ public function fileTypeIcon(string $type): string
         return 'fas fa-file-' . $iconName;
     }
 
+    private function relativeLuminance(string $rgb): float
+    {
+        // See https://en.wikipedia.org/wiki/Relative_luminance
+        [$r, $g, $b, $a] = Utils::parseHexColor($rgb);
+
+        [$lr, $lg, $lb] = [
+            pow($r / 255, 2.4),
+            pow($g / 255, 2.4),
+            pow($b / 255, 2.4),
+        ];
+
+        return 0.2126 * $lr + 0.7152 * $lg + 0.0722 * $lb;
+    }
+
+    private function apcaContrast(string $fgColor, string $bgColor): float
+    {
+        // Based on WCAG 3.x (https://www.w3.org/TR/wcag-3.0/)
+        $luminanceForeground = $this->relativeLuminance($fgColor);
+        $luminanceBackground = $this->relativeLuminance($bgColor);
+
+        $contrast = ($luminanceBackground > $luminanceForeground)
+            ? (pow($luminanceBackground, 0.56) - pow($luminanceForeground, 0.57)) * 1.14
+            : (pow($luminanceBackground, 0.65) - pow($luminanceForeground, 0.62)) * 1.14;
+
+        return round($contrast * 100, 2);
+    }
+
+    /**
+     * @return array{string, string}
+     */
+    private function hexToForegroundAndBorder(string $rgb): array
+    {
+        $background = Utils::parseHexColor($rgb);
+
+        // Pick a border that's a bit darker.
+        $darker = $background;
+        $darker[0] = max($darker[0] - 64, 0);
+        $darker[1] = max($darker[1] - 64, 0);
+        $darker[2] = max($darker[2] - 64, 0);
+        $darker[3] = max($darker[3] - 64, 0);
+        $border    = Utils::rgbToHex($darker);
+
+        // Pick the text color with the biggest absolute contrast.
+        $contrastWithWhite = $this->apcaContrast('#ffffff', $rgb);
+        $contrastWithBlack = $this->apcaContrast('#000000', $rgb);
+
+        $foreground = (abs($contrastWithBlack) > abs($contrastWithWhite)) ? '#000000' : '#ffffff';
+
+        return [$foreground, $border];
+    }
+
     public function problemBadge(ContestProblem $problem, bool $grayedOut = false): string
     {
         $rgb = Utils::convertToHex($problem->getColor() ?? '#ffffff');

webapp/src/Utils/Utils.php

@@ -346,25 +346,34 @@ public static function convertToColor(string $hex): ?string
     }
 
     /**
-     * Parse a hex color into it's three RGB values.
+     * Parse a hex color into it's four RGBA values.
      *
-     * @return array{int, int, int}
+     * @return array{int, int, int, int}
      */
     public static function parseHexColor(string $hex): array
     {
-        // Ignore alpha in hexstrings
-        if (strlen($hex) === 5) {
-            $hex = substr($hex, 0, 4);
-        } else if (strlen($hex) === 9) {
-            $hex = substr($hex, 0, 7);
+        // Insert alpha in hexstrings
+        switch(strlen($hex)) {
+            case 4:
+                $hex += 'f';
+		break;
+            case 7:
+                $hex += 'ff';
+		break;
+            case: 5:
+            case: 8:
+                break;
+            default:
+                throw new Exception("Color length of " . strlen($hex) . " not supported.");		
         }
         // Source: https://stackoverflow.com/a/21966100
-        $length = (strlen($hex) - 1) / 3;
-        $fact = [17, 1, 0.062272][$length - 1];
+        $length = (strlen($hex) - 1) / 4;
+        $fact = [17, 1, 0.062272, 1][$length - 1];
         return [
-            (int)round(hexdec(substr($hex, 1, $length)) * $fact),
-            (int)round(hexdec(substr($hex, 1 + $length, $length)) * $fact),
+            (int)round(hexdec(substr($hex, 1,               $length)) * $fact),
+            (int)round(hexdec(substr($hex, 1 + 1 * $length, $length)) * $fact),
             (int)round(hexdec(substr($hex, 1 + 2 * $length, $length)) * $fact)
+            (int)round(hexdec(substr($hex, 1 + 3 * $length, $length)) * $fact)
         ];
     }