From 94253a6e35dfa0595a5bb4b57e4c7d6b982c2c74 Mon Sep 17 00:00:00 2001
From: MAEDA Go <maeda@farend.jp>
Date: Fri, 6 Nov 2026 16:01:52 +0900
Subject: [PATCH] Increase initial avatar background colors from 8 to 16

With only 8 colors, users with the same initials get the same color in
1 out of 8 cases, which makes them hard to tell apart.

The 16 colors are taken from Open Color and use all 12 chromatic hues.
They were chosen to maximize the minimum perceptual distance (OKLab
deltaE) between any two colors: 12.6, compared with 10.9 for the
previous 8 colors (red-7 vs pink-5). Light backgrounds use black text
and the others use white text, chosen by APCA contrast.

The colors are ordered so that consecutive user IDs get clearly
different colors (minimum adjacent deltaE 32.3), and rotated so that
avatar-color-1 (usually the admin account) keeps the current orange-6
with white text.
---
 app/assets/stylesheets/application.css | 46 ++++++++++++++++++++++----
 app/helpers/avatars_helper.rb          |  2 +-
 test/helpers/avatars_helper_test.rb    |  2 +-
 3 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index ef7f7e64f..dd011c32f 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -2496,7 +2496,7 @@ span[role="img"].avatar.s100  {
 }
 
 .avatar-color-0 {
-  background-color: var(--oc-red-7);
+  background-color: var(--oc-blue-9);
   color: var(--oc-white);
 }
 .avatar-color-1 {
@@ -2504,11 +2504,11 @@ span[role="img"].avatar.s100  {
   color: var(--oc-white);
 }
 .avatar-color-2 {
-  background-color: var(--oc-yellow-4);
-  color: var(--oc-black);
+  background-color: var(--oc-indigo-6);
+  color: var(--oc-white);
 }
 .avatar-color-3 {
-  background-color: var(--oc-green-7);
+  background-color: var(--oc-red-8);
   color: var(--oc-white);
 }
 .avatar-color-4 {
@@ -2516,17 +2516,49 @@ span[role="img"].avatar.s100  {
   color: var(--oc-white);
 }
 .avatar-color-5 {
-  background-color: var(--oc-blue-7);
+  background-color: var(--oc-pink-9);
   color: var(--oc-white);
 }
 .avatar-color-6 {
-  background-color: var(--oc-grape-7);
-  color: var(--oc-white);
+  background-color: var(--oc-teal-3);
+  color: var(--oc-black);
 }
 .avatar-color-7 {
+  background-color: var(--oc-grape-8);
+  color: var(--oc-white);
+}
+.avatar-color-8 {
+  background-color: var(--oc-yellow-5);
+  color: var(--oc-black);
+}
+.avatar-color-9 {
+  background-color: var(--oc-violet-3);
+  color: var(--oc-black);
+}
+.avatar-color-10 {
+  background-color: var(--oc-lime-4);
+  color: var(--oc-black);
+}
+.avatar-color-11 {
   background-color: var(--oc-pink-5);
   color: var(--oc-white);
 }
+.avatar-color-12 {
+  background-color: var(--oc-green-6);
+  color: var(--oc-black);
+}
+.avatar-color-13 {
+  background-color: var(--oc-grape-5);
+  color: var(--oc-white);
+}
+.avatar-color-14 {
+  background-color: var(--oc-teal-9);
+  color: var(--oc-white);
+}
+.avatar-color-15 {
+  background-color: var(--oc-red-3);
+  color: var(--oc-black);
+}
 
 /* Reaction styles */
 .reaction-button:hover, .reaction-button:active {
diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb
index cfafc6841..34bab0c55 100644
--- a/app/helpers/avatars_helper.rb
+++ b/app/helpers/avatars_helper.rb
@@ -145,7 +145,7 @@ module AvatarsHelper
   def initials_avatar_tag(user, options)
     size = (options.delete(:size) || GravatarHelper::DEFAULT_OPTIONS[:size]).to_i
 
-    css_class = ["avatar-color-#{user.id % 8}", "s#{size}", options[:class]].compact.join(' ')
+    css_class = ["avatar-color-#{user.id % 16}", "s#{size}", options[:class]].compact.join(' ')
 
     content_tag('span', user.initials, role: 'img', class: css_class, title: options[:title])
   end
diff --git a/test/helpers/avatars_helper_test.rb b/test/helpers/avatars_helper_test.rb
index 94fe0398c..a4a3a13ce 100644
--- a/test/helpers/avatars_helper_test.rb
+++ b/test/helpers/avatars_helper_test.rb
@@ -122,7 +122,7 @@ class AvatarsHelperTest < Redmine::HelperTest
 
   def test_avatar_disabled_should_display_user_initials
     with_settings :gravatar_enabled => '0' do
-      assert_equal "<span role=\"img\" class=\"avatar-color-2 s24 avatar active\">JS</span>", avatar(User.find_by_mail('jsmith@somenet.foo'))
+      assert_equal "<span role=\"img\" class=\"avatar-color-8 s24 avatar active\">UM</span>", avatar(User.find_by_mail('miscuser8@foo.bar'))
     end
   end
 
-- 
2.55.0