diff --git a/src/components/styled/drawer.css b/src/components/styled/drawer.css
index 617154e0fd7..93e87e41d7c 100644
--- a/src/components/styled/drawer.css
+++ b/src/components/styled/drawer.css
@@ -8,7 +8,7 @@
   &-toggle {
     &:checked ~ .drawer-side {
       & > .drawer-overlay {
-        background-color: #00000066;
+        background-color: #0006;
       }
     }
     &:focus-visible ~ .drawer-content label.drawer-button {
diff --git a/src/components/styled/modal.css b/src/components/styled/modal.css
index 6ea6c1111ac..e8b47bed268 100644
--- a/src/components/styled/modal.css
+++ b/src/components/styled/modal.css
@@ -5,7 +5,7 @@
   overscroll-behavior: contain;
   &:not(dialog:not(.modal-open)),
   &::backdrop {
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: #0006;
     animation: modal-pop 0.2s ease-out;
   }
 }