diff --git a/frontend/assets/style/_mixins.scss b/frontend/assets/style/_mixins.scss
index 8be7245cc9..fd9093b39e 100644
--- a/frontend/assets/style/_mixins.scss
+++ b/frontend/assets/style/_mixins.scss
@@ -55,6 +55,12 @@ $payment-table-desktop-bp: 1290px;
   }
 }
 
+@mixin forced-color-mode {
+  @media (forced-colors: active) {
+    @content;
+  }
+}
+
 %unselectable {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
diff --git a/frontend/views/components/modal/ModalClose.vue b/frontend/views/components/modal/ModalClose.vue
index 323ee6f733..6752f3f014 100644
--- a/frontend/views/components/modal/ModalClose.vue
+++ b/frontend/views/components/modal/ModalClose.vue
@@ -37,6 +37,10 @@ export default ({
   cursor: pointer;
   background-color: $general_1;
 
+  @include forced-color-mode {
+    border: 1px solid $white;
+  }
+
   @include tablet {
     top: 1.5rem;
     right: 1.5rem;
@@ -87,6 +91,11 @@ export default ({
     transition: transform 0.15s ease-in;
     transform: translateX(-50%) translateY(-50%) rotate(45deg);
     transform-origin: center center;
+    forced-color-adjust: none;
+
+    @include forced-color-mode {
+      background-color: $white;
+    }
   }
 
   &::after {
diff --git a/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue b/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue
index 922560e2ce..45f65ddf6d 100644
--- a/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue
+++ b/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue
@@ -489,8 +489,8 @@ img.c-preview-image {
     border-radius: 0.5rem;
     opacity: 0.675;
 
-    @media (forced-colors: active) {
-      border: 1px solid;
+    @include forced-color-mode {
+      border: 1px solid $white;
       opacity: 1;
     }
   }
@@ -522,6 +522,12 @@ img.c-preview-image {
 
   ::v-deep input.sInput {
     forced-color-adjust: none;
+
+    @include forced-color-mode {
+      background: none;
+      border: 1px solid $white;
+      color: $white;
+    }
   }
 }