diff --git a/src/badge/demos/enUS/color.demo.vue b/src/badge/demos/enUS/color.demo.vue
index a5cf0fd454d..d349ed8f537 100644
--- a/src/badge/demos/enUS/color.demo.vue
+++ b/src/badge/demos/enUS/color.demo.vue
@@ -3,7 +3,7 @@
 </markdown>
 
 <template>
-  <n-badge value="15" color="grey">
+  <n-badge value="15" color="grey" text-color="yellow">
     <n-avatar />
   </n-badge>
 </template>
diff --git a/src/badge/demos/zhCN/color.demo.vue b/src/badge/demos/zhCN/color.demo.vue
index 88750f9edbc..340570d6874 100644
--- a/src/badge/demos/zhCN/color.demo.vue
+++ b/src/badge/demos/zhCN/color.demo.vue
@@ -3,7 +3,7 @@
 </markdown>
 
 <template>
-  <n-badge value="15" color="grey">
+  <n-badge value="15" color="grey" text-color="yellow">
     <n-avatar />
   </n-badge>
 </template>
diff --git a/src/badge/src/Badge.tsx b/src/badge/src/Badge.tsx
index e2c7ce27e8a..16e3b74d42b 100644
--- a/src/badge/src/Badge.tsx
+++ b/src/badge/src/Badge.tsx
@@ -34,6 +34,7 @@ export const badgeProps = {
   showZero: Boolean,
   processing: Boolean,
   color: String,
+  textColor: String,
   offset: Array as unknown as PropType<
     readonly [number | string, number | string]
   >
@@ -78,10 +79,15 @@ export default defineComponent({
 
     const rtlEnabledRef = useRtl('Badge', mergedRtlRef, mergedClsPrefixRef)
     const cssVarsRef = computed(() => {
-      const { type, color: propColor } = props
+      const { type, color: propColor, textColor: propsTextColor } = props
       const {
         common: { cubicBezierEaseInOut, cubicBezierEaseOut },
-        self: { [createKey('color', type)]: color, fontFamily, fontSize }
+        self: {
+          [createKey('color', type)]: color,
+          fontFamily,
+          fontSize,
+          textColor
+        }
       } = themeRef.value
       return {
         '--n-font-size': fontSize,
@@ -89,7 +95,8 @@ export default defineComponent({
         '--n-color': propColor || color,
         '--n-ripple-color': propColor || color,
         '--n-bezier': cubicBezierEaseInOut,
-        '--n-ripple-bezier': cubicBezierEaseOut
+        '--n-ripple-bezier': cubicBezierEaseOut,
+        '--n-text-color': propsTextColor || textColor
       }
     })
 
diff --git a/src/badge/src/styles/index.cssr.ts b/src/badge/src/styles/index.cssr.ts
index fe074cdee5f..ebe90e6aec9 100644
--- a/src/badge/src/styles/index.cssr.ts
+++ b/src/badge/src/styles/index.cssr.ts
@@ -54,7 +54,7 @@ export default c([
       transition:
         background-color .3s var(--n-bezier),
         color .3s var(--n-bezier);
-      color: #FFF;
+      color: var(--n-text-color);
       position: absolute;
       height: 18px;
       line-height: 18px;
diff --git a/src/badge/styles/dark.ts b/src/badge/styles/dark.ts
index 3fdc4a7bb6b..05b0530791e 100644
--- a/src/badge/styles/dark.ts
+++ b/src/badge/styles/dark.ts
@@ -18,6 +18,7 @@ const badgeDark: BadgeTheme = {
       colorSuccess: successColorSuppl,
       colorError: errorColorSuppl,
       colorWarning: warningColorSuppl,
+      textColor: '#FFF',
       fontSize: '12px',
       fontFamily
     }
diff --git a/src/badge/styles/light.ts b/src/badge/styles/light.ts
index d1a394401a6..6d70e71ee89 100644
--- a/src/badge/styles/light.ts
+++ b/src/badge/styles/light.ts
@@ -10,6 +10,7 @@ function self(vars: ThemeCommonVars) {
     colorSuccess: successColor,
     colorError: errorColor,
     colorWarning: warningColor,
+    textColor: '#FFF',
     fontSize: '12px',
     fontFamily
   }