diff --git a/web/src/compose_validate.ts b/web/src/compose_validate.ts
index 1ca902763e..3dd26bb414 100644
--- a/web/src/compose_validate.ts
+++ b/web/src/compose_validate.ts
@@ -725,10 +725,13 @@ export function check_overflow_text(): number {
     const max_length = realm.max_message_length;
     const remaining_characters = max_length - text.length;
     const $indicator = $("#compose-limit-indicator");
+    const $textarea = $("textarea#compose-textarea");
 
     if (text.length > max_length) {
+        $indicator.removeClass("approaching-limit");
+        $textarea.removeClass("approaching-limit");
         $indicator.addClass("over-limit");
-        $("textarea#compose-textarea").addClass("over-limit");
+        $textarea.addClass("over-limit");
         $indicator.html(
             render_compose_limit_indicator({
                 remaining_characters,
@@ -737,7 +740,10 @@ export function check_overflow_text(): number {
         set_message_too_long(true);
     } else if (remaining_characters <= 900) {
         $indicator.removeClass("over-limit");
-        $("textarea#compose-textarea").removeClass("over-limit");
+        $textarea.removeClass("over-limit");
+        $indicator.addClass("approaching-limit");
+        $textarea.addClass("approaching-limit");
+
         $indicator.html(
             render_compose_limit_indicator({
                 remaining_characters,
@@ -746,7 +752,8 @@ export function check_overflow_text(): number {
         set_message_too_long(false);
     } else {
         $indicator.text("");
-        $("textarea#compose-textarea").removeClass("over-limit");
+        $textarea.removeClass("over-limit");
+        $textarea.removeClass("approaching-limit");
 
         set_message_too_long(false);
     }
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 4bc6081de7..1aa0930036 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -675,6 +675,8 @@
     /* Compose box colors */
     --color-compose-box-background: hsl(232deg 30% 92%);
     --color-compose-message-content-background: hsl(0deg 0% 100%);
+    --color-compose-message-content-background-warning: hsl(50deg 75% 92%);
+    --color-compose-message-content-background-error: hsl(3deg 35% 90%);
     --color-compose-send-button-icon-color: hsl(0deg 0% 100%);
     --color-compose-send-button-background: hsl(240deg 96% 68%);
     --color-compose-send-button-background-interactive: hsl(240deg 41% 50%);
@@ -742,6 +744,13 @@
     --color-message-formatting-controls-container: hsl(232deg 30% 96%);
     --color-message-content-container-border: hsl(0deg 0% 0% / 10%);
     --color-message-content-container-border-focus: hsl(0deg 0% 57%);
+    --color-message-content-container-border-warning: hsl(038deg 70% 50%);
+    --color-message-content-container-border-error: hsl(0deg 76% 65%);
+    --color-message-content-container-border-invalid: hsl(3deg 57% 33%);
+    --color-message-content-container-shadow-warning: 0 0 0 1pt
+        hsl(038deg 70% 50%);
+    --color-message-content-container-shadow-error: 0 0 0 1pt hsl(0deg 76% 65%);
+    --color-message-content-container-shadow-invalid: 0 0 2px hsl(3deg 57% 33%);
     --color-compose-control-button-background-hover: hsl(0deg 0% 0% / 5%);
     --color-compose-focus-ring: var(--color-outline-focus);
 
@@ -1230,6 +1239,8 @@
         var(--color-compose-box-background),
         hsl(0deg 0% 0%) 20%
     );
+    --color-compose-message-content-background-warning: hsl(50deg 75% 12%);
+    --color-compose-message-content-background-error: hsl(3deg 50% 12%);
     --color-compose-send-button-focus-shadow: hsl(0deg 0% 100% / 80%);
     --color-compose-send-control-button: hsl(240deg 30% 70%);
     --color-compose-send-control-button-background: transparent;
diff --git a/web/styles/compose.css b/web/styles/compose.css
index e55f508945..7fd523d12c 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -329,7 +329,14 @@
 
     &:has(.new_message_textarea.over-limit),
     &:has(.new_message_textarea.over-limit:focus) {
-        box-shadow: 0 0 0 1pt hsl(0deg 76% 65%);
+        border-color: var(--color-message-content-container-border-error);
+        box-shadow: var(--color-message-content-container-shadow-error);
+    }
+
+    &:has(.new_message_textarea.approaching-limit),
+    &:has(.new_message_textarea.approaching-limit:focus) {
+        border-color: var(--color-message-content-container-border-warning);
+        box-shadow: var(--color-message-content-container-shadow-warning);
     }
 
     &:has(.new_message_textarea.over-limit.flash) {
@@ -338,8 +345,8 @@
 
     &:has(.new_message_textarea.invalid),
     &:has(.new_message_textarea.invalid:focus) {
-        border-color: hsl(3deg 57% 33%);
-        box-shadow: 0 0 2px hsl(3deg 57% 33%);
+        border-color: var(--color-message-content-container-border-invalid);
+        box-shadow: var(--color-message-content-container-shadow-invalid);
     }
 }
 
@@ -400,6 +407,16 @@
     padding-right: var(--composebox-buttons-width);
     background-color: var(--color-compose-message-content-background);
     color: var(--color-text-default);
+
+    &.over-limit {
+        background-color: var(--color-compose-message-content-background-error);
+    }
+
+    &.approaching-limit {
+        background-color: var(
+            --color-compose-message-content-background-warning
+        );
+    }
 }
 
 .surround-formatting-buttons-row {