diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss
index 1e2007b216..695e7c0cde 100644
--- a/src/components/tabs/tabs.md.scss
+++ b/src/components/tabs/tabs.md.scss
@@ -12,7 +12,8 @@ $tabbar-md-item-icon-size:           2.4rem !default;
 $tabbar-md-item-height:              4.8rem !default;
 
 $tab-button-md-active-color:         $toolbar-md-active-color !default;
-$tab-button-md-inactive-color:       rgba($toolbar-md-inactive-color, .7) !default;
+$tab-button-md-inactive-opacity:     .7 !default;
+$tab-button-md-inactive-color:       rgba($toolbar-md-inactive-color, $tab-button-md-inactive-opacity) !default;
 
 
 ion-tabbar {
@@ -103,7 +104,7 @@ tab-highlight {
     background-color: $color-base;
 
     .tab-button {
-      color: $color-contrast;
+      color: rgba($color-contrast, $tab-button-md-inactive-opacity);
     }
 
     .tab-button:hover:not(.disable-hover),
diff --git a/src/components/tabs/tabs.wp.scss b/src/components/tabs/tabs.wp.scss
index c33a5aac3c..0cbc0a291a 100644
--- a/src/components/tabs/tabs.wp.scss
+++ b/src/components/tabs/tabs.wp.scss
@@ -12,7 +12,8 @@ $tabbar-wp-item-icon-size:           2.4rem !default;
 $tabbar-wp-item-height:              4.8rem !default;
 
 $tab-button-wp-active-color:         $toolbar-wp-active-color !default;
-$tab-button-wp-inactive-color:       rgba($toolbar-wp-inactive-color, .7) !default;
+$tab-button-wp-inactive-opacity:     .7 !default;
+$tab-button-wp-inactive-color:       rgba($toolbar-wp-inactive-color, $tab-button-wp-inactive-opacity) !default;
 
 $tab-button-wp-background-activated: rgba(0, 0, 0, .1) !default;
 
@@ -96,7 +97,7 @@ ion-tabbar {
     background-color: $color-base;
 
     .tab-button {
-      color: $color-contrast;
+      color: rgba($color-contrast, $tab-button-wp-inactive-opacity);
     }
 
     .tab-button:hover:not(.disable-hover),