diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index c8310e0507..8c07f7c5c7 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -642,7 +642,7 @@ input.settings_text_input {
 .unread_mention_info:not(:empty) {
     margin-right: 5px;
     margin-left: 2px;
-    opacity: 0.5;
+    opacity: var(--opacity-unread-mention-info);
 }
 
 /* Implement the web app's default-hidden convention for alert
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 4db0d8a987..d2491dfcd0 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -408,6 +408,10 @@
     --opacity-sidebar-heading-hover: 0.9;
     --opacity-left-sidebar-muted: 0.55;
     --opacity-left-sidebar-muted-hover: 0.75;
+    --opacity-unread-mention-info: 0.5;
+    /* Since --opacity-unread-mention-info is too close to
+       --opacity-left-sidebar-muted */
+    --opacity-left-sidebar-muted-mentions: 0.3;
     --opacity-right-sidebar-subheading: 0.65;
     --opacity-right-sidebar-subheading-hover: 0.9;
 
diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index 8dde9620a2..3c4baa1e3b 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -799,7 +799,7 @@ ul.filters {
 
     .has-only-muted-mentions {
         .unread_mention_info {
-            opacity: var(--opacity-left-sidebar-muted);
+            opacity: var(--opacity-left-sidebar-muted-mentions);
         }
 
         &:hover .unread_mention_info {
@@ -850,6 +850,12 @@ ul.filters {
             opacity: var(--opacity-left-sidebar-muted);
         }
 
+        .unread_mention_info {
+            /* Default opacity for this icon is too close to
+               --opacity-left-sidebar-muted */
+            opacity: var(--opacity-left-sidebar-muted-mentions);
+        }
+
         &:hover {
             .stream-privacy,
             .stream-name,