diff --git a/public/src/client/chats/messages.js b/public/src/client/chats/messages.js
index d82dff71c3..c2fdd4ecad 100644
--- a/public/src/client/chats/messages.js
+++ b/public/src/client/chats/messages.js
@@ -50,7 +50,10 @@ define('forum/chats/messages', [
 	messages.updateRemainingLength = function (parent) {
 		const element = parent.find('[component="chat/input"]');
 		parent.find('[component="chat/message/length"]').text(element.val().length);
-		parent.find('[component="chat/message/remaining"]').text(config.maximumChatMessageLength - element.val().length);
+		const remainingLength = config.maximumChatMessageLength - element.val().length
+		parent.find('[component="chat/message/remaining"]').text(remainingLength)
+			.toggleClass('fw-bold text-danger', remainingLength < 0)
+			.toggleClass('text-muted', remainingLength >= 0);
 		hooks.fire('action:chat.updateRemainingLength', {
 			parent: parent,
 		});