diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss
index 452b1bcd1a7..1e2007b2163 100644
--- a/src/components/tabs/tabs.md.scss
+++ b/src/components/tabs/tabs.md.scss
@@ -12,7 +12,7 @@ $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:       $toolbar-md-inactive-color !default;
+$tab-button-md-inactive-color:       rgba($toolbar-md-inactive-color, .7) !default;
 
 
 ion-tabbar {
@@ -31,11 +31,9 @@ ion-tabbar {
   font-weight: $tabbar-md-item-font-weight;
   color: $tab-button-md-inactive-color;
   box-shadow: none;
-  opacity: .7;
 
   &[aria-selected=true] {
     color: $tab-button-md-active-color;
-    opacity: 1;
   }
 }
 
diff --git a/src/components/tabs/tabs.wp.scss b/src/components/tabs/tabs.wp.scss
index cc02972f479..c33a5aac3cf 100644
--- a/src/components/tabs/tabs.wp.scss
+++ b/src/components/tabs/tabs.wp.scss
@@ -12,7 +12,7 @@ $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:       $toolbar-wp-inactive-color !default;
+$tab-button-wp-inactive-color:       rgba($toolbar-wp-inactive-color, .7) !default;
 
 $tab-button-wp-background-activated: rgba(0, 0, 0, .1) !default;
 
@@ -32,12 +32,10 @@ ion-tabbar {
   font-weight: $tabbar-wp-item-font-weight;
   color: $tab-button-wp-inactive-color;
   box-shadow: none;
-  opacity: .7;
 
   &[aria-selected=true] {
     border-bottom-color: $tab-button-wp-active-color;
     color: $tab-button-wp-active-color;
-    opacity: 1;
   }
 
   &.activated {