diff --git a/server/src/wled_controller/static/css/base.css b/server/src/wled_controller/static/css/base.css
index 99e107c..e94b70e 100644
--- a/server/src/wled_controller/static/css/base.css
+++ b/server/src/wled_controller/static/css/base.css
@@ -7,6 +7,7 @@
 :root {
     --primary-color: #4CAF50;
     --primary-hover: #5cb860;
+    --primary-contrast: #ffffff;
     --danger-color: #f44336;
     --warning-color: #ff9800;
     --info-color: #2196F3;
diff --git a/server/src/wled_controller/static/css/cards.css b/server/src/wled_controller/static/css/cards.css
index 77ef015..8b149f3 100644
--- a/server/src/wled_controller/static/css/cards.css
+++ b/server/src/wled_controller/static/css/cards.css
@@ -399,7 +399,7 @@ body.cs-drag-active .card-drag-handle {
     padding: 1px 5px;
     border-radius: 3px;
     background: var(--primary-color);
-    color: #fff;
+    color: var(--primary-contrast);
     font-weight: 600;
     vertical-align: middle;
     margin-right: 2px;
diff --git a/server/src/wled_controller/static/css/components.css b/server/src/wled_controller/static/css/components.css
index e205abe..8bfbd01 100644
--- a/server/src/wled_controller/static/css/components.css
+++ b/server/src/wled_controller/static/css/components.css
@@ -7,7 +7,7 @@
 
 .badge.processing {
     background: var(--primary-color);
-    color: white;
+    color: var(--primary-contrast);
 }
 
 .badge.idle {
@@ -80,7 +80,7 @@
 
 .btn-primary {
     background: var(--primary-color);
-    color: white;
+    color: var(--primary-contrast);
 }
 
 .btn-danger {
diff --git a/server/src/wled_controller/static/css/dashboard.css b/server/src/wled_controller/static/css/dashboard.css
index edc9f71..84cc8f1 100644
--- a/server/src/wled_controller/static/css/dashboard.css
+++ b/server/src/wled_controller/static/css/dashboard.css
@@ -259,7 +259,7 @@
     font-size: 0.7rem;
     font-weight: 600;
     background: var(--primary-color);
-    color: #fff;
+    color: var(--primary-contrast);
     flex-shrink: 0;
 }
 
diff --git a/server/src/wled_controller/static/css/layout.css b/server/src/wled_controller/static/css/layout.css
index dd5afff..cad1afa 100644
--- a/server/src/wled_controller/static/css/layout.css
+++ b/server/src/wled_controller/static/css/layout.css
@@ -161,7 +161,7 @@ h2 {
 
 .tab-btn.active .tab-badge {
     background: var(--primary-color);
-    color: #fff;
+    color: var(--primary-contrast);
 }
 
 .tab-panel {
@@ -410,11 +410,12 @@ h2 {
 
 .cp-result.cp-active {
     background: var(--primary-color);
-    color: #fff;
+    color: var(--primary-contrast);
 }
 
 .cp-result.cp-active .cp-detail {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--primary-contrast);
+    opacity: 0.7;
 }
 
 .cp-icon {
diff --git a/server/src/wled_controller/static/css/modal.css b/server/src/wled_controller/static/css/modal.css
index 4e8a694..8b4509a 100644
--- a/server/src/wled_controller/static/css/modal.css
+++ b/server/src/wled_controller/static/css/modal.css
@@ -832,7 +832,7 @@
 
 .gradient-stop-bidir-btn.active {
     background: var(--primary-color);
-    color: #fff;
+    color: var(--primary-contrast);
     border-color: var(--primary-color);
     opacity: 1;
 }
diff --git a/server/src/wled_controller/static/css/patterns.css b/server/src/wled_controller/static/css/patterns.css
index 2c64fae..5f362c3 100644
--- a/server/src/wled_controller/static/css/patterns.css
+++ b/server/src/wled_controller/static/css/patterns.css
@@ -73,11 +73,11 @@
 
 .stream-card-link:hover {
     background: var(--primary-color);
-    color: #fff;
+    color: var(--primary-contrast);
 }
 
 .stream-card-link:hover .icon {
-    color: #fff;
+    color: var(--primary-contrast);
 }
 
 @keyframes cardHighlight {
diff --git a/server/src/wled_controller/static/css/streams.css b/server/src/wled_controller/static/css/streams.css
index 2f6b8af..0d77149 100644
--- a/server/src/wled_controller/static/css/streams.css
+++ b/server/src/wled_controller/static/css/streams.css
@@ -578,7 +578,7 @@
 
 .stream-tab-btn.active .stream-tab-count {
     background: var(--primary-color);
-    color: #fff;
+    color: var(--primary-contrast);
 }
 
 .cs-expand-collapse-group {
diff --git a/server/src/wled_controller/templates/index.html b/server/src/wled_controller/templates/index.html
index b4e982c..b41ead0 100644
--- a/server/src/wled_controller/templates/index.html
+++ b/server/src/wled_controller/templates/index.html
@@ -223,12 +223,22 @@
             return '#'+[rr,gg,bb].map(x=>Math.round(x*255).toString(16).padStart(2,'0')).join('');
         }
 
+        function contrastColor(hex) {
+            const r = parseInt(hex.slice(1,3),16)/255;
+            const g = parseInt(hex.slice(3,5),16)/255;
+            const b = parseInt(hex.slice(5,7),16)/255;
+            const lin = c => c <= 0.03928 ? c/12.92 : Math.pow((c+0.055)/1.055, 2.4);
+            const L = 0.2126*lin(r) + 0.7152*lin(g) + 0.0722*lin(b);
+            return L > 0.36 ? '#1a1a1a' : '#ffffff';
+        }
+
         function applyAccentColor(hex, silent) {
             const root = document.documentElement;
             root.style.setProperty('--primary-color', hex);
             const theme = root.getAttribute('data-theme');
             root.style.setProperty('--primary-text-color', adjustLightness(hex, theme === 'dark' ? 15 : -15));
             root.style.setProperty('--primary-hover', adjustLightness(hex, 8));
+            root.style.setProperty('--primary-contrast', contrastColor(hex));
             document.getElementById('accent-swatch').style.background = hex;
             document.getElementById('accent-picker').value = hex;
             // Mark the active preset dot