diff --git a/src/material/badge/_m2-badge.scss b/src/material/badge/_m2-badge.scss
index 83e5300f60a6..7fbfc925fc07 100644
--- a/src/material/badge/_m2-badge.scss
+++ b/src/material/badge/_m2-badge.scss
@@ -1,7 +1,5 @@
-@use 'sass:meta';
 @use 'sass:map';
 @use 'sass:math';
-@use 'sass:color';
 @use '../core/theming/inspection';
 
 $_default-size: 22px;
@@ -42,22 +40,9 @@ $_large-size: $_default-size + 6px;
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $primary-color-tokens: private-get-color-palette-color-tokens($theme, primary);
-  $app-background: inspection.get-theme-color($theme, background, background);
-  $disabled-background: inspection.get-theme-color($theme, foreground, disabled-button);
-
-  // The disabled color usually has some kind of opacity, but because the badge is overlayed
-  // on top of something else, it won't look good if it's opaque. If it is a color *type*,
-  // we convert it into a solid color by taking the opacity from the rgba value and using
-  // the value to determine the percentage of the background to put into foreground when
-  // mixing the colors together.
-  @if (meta.type-of($disabled-background) == color and meta.type-of($app-background) == color) {
-    $badge-opacity: color.opacity($disabled-background);
-    $disabled-background: color.mix($app-background,
-      rgba($disabled-background, 1), (1 - $badge-opacity) * 100%);
-  }
-
   @return map.merge($primary-color-tokens, (
-    badge-disabled-state-background-color: $disabled-background,
+    badge-disabled-state-background-color:
+        inspection.get-theme-color($theme, foreground, disabled-button),
     badge-disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text),
   ));
 }