UI Components, Letter Avatars, Contrast too low, see #31102 and #0031153 (ILIAS-eLearning#3530)

Author: Amstutz

Services/User/Avatar/classes/class.ilUserAvatarLetter.php

@@ -9,18 +9,14 @@
 class ilUserAvatarLetter extends ilUserAvatarBase
 {
     /**
+     * all variants of letter avatar background colors (MUST be 26), note for a11y reason, they must be in contrast 3x1 to white (foreground color)
      * @var array
      */
+
     protected static $colors = [
-        "#1abc9c", "#16a085", "#f1c40f",
-        "#f39c12", "#2ecc71", "#27ae60",
-        "#e67e22", "#d35400", "#3498db",
-        "#2980b9", "#e74c3c", "#c0392b",
-        "#9b59b6", "#8e44ad", "#bdc3c7",
-        "#34495e", "#2c3e50", "#95a5a6",
-        "#7f8c8d", "#ec87bf", "#d870ad",
-        "#f69785", "#9ba37e", "#b49255",
-        "#b49255", "#a94136"
+        "#0e6252", "#107360", "#aa890a", "#c87e0a", "#176437", "#196f3d", "#bf6516", "#a04000", "#1d6fa5", "#1b557a",
+        "#bf2718", "#81261d", "#713b87", "#522764", "#78848c", "#34495e", "#2c3e50", "#566566", "#90175a", "#9e2b6e",
+        "#d22f10", "#666d4e", "#715a32", "#83693a", "#963a30", "#e74c3c"
     ];
 
     /**

src/UI/Implementation/Component/Symbol/Avatar/Letter.php

@@ -14,6 +14,6 @@ public function getAbbreviation() : string
 
     public function getBackgroundColorVariant() : int
     {
-        return (crc32($this->getUsername()) % 26) + 1;
+        return ((crc32($this->getAbbreviation()) % 26) + 1);
     }
 }

templates/default/delos.css

@@ -10633,6 +10633,11 @@ footer {
   border-color: #e5b3ad;
   color: white;
 }
+.il-avatar.il-avatar-letter.il-avatar-letter-color-26 {
+  background-color: #e74c3c;
+  border-color: #fdf3f2;
+  color: white;
+}
 @media only screen and (max-width: 768px) {
   .il-avatar {
     height: 22.5px;

templates/default/less/variables.less

@@ -752,8 +752,8 @@ with the il- variable set here.
 @il-avatar-letter-abbreviation-font-weight: lighter;
 //** change the abbreviations font transform
 @il-avatar-letter-abbreviation-font-transform: inherit;
-//** all variants of letter avatar background colors (MUST be 26)
-@il-avatar-letter-color-variants: #0e6252, #107360, #aa890a, #c87e0a, #176437, #196f3d, #bf6516, #a04000, #1d6fa5, #1b557a, #bf2718, #81261d, #713b87, #522764, #78848c, #34495e, #2c3e50, #566566, #90175a, #9e2b6e, #d22f10, #666d4e, #715a32, #83693a, #963a30;
+//** all variants of letter avatar background colors (MUST be 26), note for a11y reason, they must be in contrast 3x1 to white (foreground color)
+@il-avatar-letter-color-variants: #0e6252, #107360, #aa890a, #c87e0a, #176437, #196f3d, #bf6516, #a04000, #1d6fa5, #1b557a, #bf2718, #81261d, #713b87, #522764, #78848c, #34495e, #2c3e50, #566566, #90175a, #9e2b6e, #d22f10, #666d4e, #715a32, #83693a, #963a30, #e74c3c;
 
 
 //== System Info

tests/UI/Component/Symbol/Avatar/AvatarTest.php

@@ -178,7 +178,7 @@ public function testRenderingPictureWithSomeAlternativeText()
      * @param int $length
      * @return Generator|Closure
      */
-    public function getRandom26StringsForAllColorVariants(int $color_variants = 26, int $length = 10) : Generator
+    public function getRandom26StringsForAllColorVariants(int $color_variants = 26, int $length = 2) : Generator
     {
         $sh = static function ($length = 10) {
             return substr(str_shuffle(str_repeat($x = 'abcdefghijklmnopqrstuvwxyz', (int) ceil($length / strlen($x)))), 1, $length);