diff --git a/ui/components/app/snaps/snap-ui-renderer/components/text.ts b/ui/components/app/snaps/snap-ui-renderer/components/text.ts
index 9502df1aabaa..b0e30a6d15d1 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/text.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/text.ts
@@ -12,17 +12,38 @@ import { UIComponentFactory } from './types';
 export const text: UIComponentFactory<TextElement> = ({
   element,
   ...params
-}) => ({
-  element: 'Text',
-  children: mapTextToTemplate(
-    getJsxChildren(element) as NonEmptyArray<string | JSXElement>,
-    params,
-  ),
-  props: {
-    variant: TextVariant.bodyMd,
-    overflowWrap: OverflowWrap.Anywhere,
-    color: TextColor.inherit,
-    className: 'snap-ui-renderer__text',
-    textAlign: element.props.alignment,
-  },
-});
+}) => {
+  const getTextColor = () => {
+    switch (element.props.color) {
+      case 'default':
+        return TextColor.textDefault;
+      case 'alternative':
+        return TextColor.textAlternative;
+      case 'muted':
+        return TextColor.textMuted;
+      case 'error':
+        return TextColor.errorDefault;
+      case 'success':
+        return TextColor.successDefault;
+      case 'warning':
+        return TextColor.warningDefault;
+      default:
+        return TextColor.inherit;
+    }
+  };
+
+  return {
+    element: 'Text',
+    children: mapTextToTemplate(
+      getJsxChildren(element) as NonEmptyArray<string | JSXElement>,
+      params,
+    ),
+    props: {
+      variant: TextVariant.bodyMd,
+      overflowWrap: OverflowWrap.Anywhere,
+      color: getTextColor(),
+      className: 'snap-ui-renderer__text',
+      textAlign: element.props.alignment,
+    },
+  };
+};