diff --git a/framework/core/js/src/common/components/Badge.tsx b/framework/core/js/src/common/components/Badge.tsx
index 7a75b3149b..6529490d03 100644
--- a/framework/core/js/src/common/components/Badge.tsx
+++ b/framework/core/js/src/common/components/Badge.tsx
@@ -28,7 +28,7 @@ export default class Badge<CustomAttrs extends IBadgeAttrs = IBadgeAttrs> extend
   view() {
     const { type, icon: iconName, label, color, style = {}, ...attrs } = this.attrs;
 
-    const className = classList('Badge', [type && `Badge--${type}`], attrs.className, color && textContrastClass(color));
+    const className = classList('Badge', [type && `Badge--${type}`], attrs.className, textContrastClass(color));
 
     const iconChild = iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;');
 
diff --git a/framework/core/js/src/common/helpers/textContrastClass.ts b/framework/core/js/src/common/helpers/textContrastClass.ts
index fa1e0aec0b..145378dc88 100644
--- a/framework/core/js/src/common/helpers/textContrastClass.ts
+++ b/framework/core/js/src/common/helpers/textContrastClass.ts
@@ -1,5 +1,7 @@
 import isDark from '../utils/isDark';
 
-export default function textContrastClass(hexcolor: string | null): string {
+export default function textContrastClass(hexcolor: string | null | undefined): string {
+  if (!hexcolor) return 'text-contrast--unchanged';
+
   return isDark(hexcolor) ? 'text-contrast--light' : 'text-contrast--dark';
 }
diff --git a/framework/core/less/common/scaffolding.less b/framework/core/less/common/scaffolding.less
index 175f8f22ab..f6d2b79970 100644
--- a/framework/core/less/common/scaffolding.less
+++ b/framework/core/less/common/scaffolding.less
@@ -176,4 +176,10 @@ blockquote ol:last-child {
     --contrast-color: var(--text-on-dark);
     color: var(--contrast-color);
   }
+
+  // This exists to prevent inheriting the contrast color from a parent element.
+  // Like when a badge is inside a tag hero.
+  &--unchanged {
+    --contrast-color: var(--unchanged-color);
+  }
 }