diff --git a/core/src/components/tab-bar/tab-bar.scss b/core/src/components/tab-bar/tab-bar.scss
index ed8ef76d45..05f6e76f6a 100644
--- a/core/src/components/tab-bar/tab-bar.scss
+++ b/core/src/components/tab-bar/tab-bar.scss
@@ -41,6 +41,7 @@
 
 :host(.ion-color) ::slotted(ion-tab-button) {
   --background-focused: #{current-color(shade)};
+  --color-selected: #{current-color(contrast)};
 }
 
 :host(.ion-color) ::slotted(.tab-selected) {
diff --git a/core/src/components/tab-bar/test/scenarios/index.html b/core/src/components/tab-bar/test/scenarios/index.html
index 10e2915b9b..93da733bae 100644
--- a/core/src/components/tab-bar/test/scenarios/index.html
+++ b/core/src/components/tab-bar/test/scenarios/index.html
@@ -233,8 +233,9 @@
       border-radius: 50%;
       max-width: 80px;
       height: 80px;
-      background: #3880ff;
-      color: white;
+      --background: #3880ff;
+      --color: rgba(255, 255, 255, .7);
+      --color-selected: white;
     }
 
     .main-tab-icon {