diff --git a/framework/core/js/src/common/components/Badge.tsx b/framework/core/js/src/common/components/Badge.tsx
index 4261e8d95..7a75b3149 100644
--- a/framework/core/js/src/common/components/Badge.tsx
+++ b/framework/core/js/src/common/components/Badge.tsx
@@ -2,6 +2,7 @@ import Tooltip from './Tooltip';
 import Component, { ComponentAttrs } from '../Component';
 import icon from '../helpers/icon';
 import classList from '../utils/classList';
+import textContrastClass from '../helpers/textContrastClass';
 
 export interface IBadgeAttrs extends ComponentAttrs {
   icon: string;
@@ -27,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);
+    const className = classList('Badge', [type && `Badge--${type}`], attrs.className, color && textContrastClass(color));
 
     const iconChild = iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;');
 
diff --git a/framework/core/less/common/Badge.less b/framework/core/less/common/Badge.less
index 3df260b79..9cc57318c 100644
--- a/framework/core/less/common/Badge.less
+++ b/framework/core/less/common/Badge.less
@@ -4,7 +4,7 @@
   height: var(--size);
   border-radius: calc(~"var(--size) / 2");
   background: var(--badge-bg);
-  color: var(--badge-color);
+  color: var(--contrast-color, var(--badge-color));
   display: inline-flex;
   align-items: center;
   justify-content: center;