diff --git a/web/components/chat/ChatContainer/ChatContainer.stories.tsx b/web/components/chat/ChatContainer/ChatContainer.stories.tsx
index 11be540ac7..f12616e28e 100644
--- a/web/components/chat/ChatContainer/ChatContainer.stories.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.stories.tsx
@@ -8,6 +8,7 @@ export default {
   title: 'owncast/Chat/Chat messages container',
   component: ChatContainer,
   parameters: {
+    chromatic: { diffThreshold: 0.2 },
     docs: {
       description: {
         component: `
diff --git a/web/components/chat/ChatTextField/ChatTextField.stories.tsx b/web/components/chat/ChatTextField/ChatTextField.stories.tsx
index 3db664ee0c..5586eb2ddf 100644
--- a/web/components/chat/ChatTextField/ChatTextField.stories.tsx
+++ b/web/components/chat/ChatTextField/ChatTextField.stories.tsx
@@ -33,6 +33,7 @@ export default {
   component: ChatTextField,
   parameters: {
     fetchMock: mocks,
+    chromatic: { diffThreshold: 0.2 },
 
     design: {
       type: 'image',
diff --git a/web/stories/ReadwriteChat.stories.tsx b/web/stories/ReadwriteChat.stories.tsx
index 89e57f703c..7e618f7640 100644
--- a/web/stories/ReadwriteChat.stories.tsx
+++ b/web/stories/ReadwriteChat.stories.tsx
@@ -13,7 +13,9 @@ import { ClientConfig } from '../interfaces/client-config.model';
 export default {
   title: 'owncast/Chat/Embeds/Read-write chat',
   component: ReadWritePage,
-  parameters: {},
+  parameters: {
+    chromatic: { diffThreshold: 0.2 },
+  },
 } as ComponentMeta<typeof ReadWritePage>;
 
 const testMessages =