diff --git a/theme/boost/scss/moodle/modal.scss b/theme/boost/scss/moodle/modal.scss
index b3802e2b803..23ebb8db601 100644
--- a/theme/boost/scss/moodle/modal.scss
+++ b/theme/boost/scss/moodle/modal.scss
@@ -15,4 +15,17 @@
             }
         }
     }
+
+    // Override Bootstrap .close for better accessibility.
+    .close {
+        // Adjust the margins so the focus outline does not look clipped.
+        margin: -0.8rem -0.8rem -0.8rem auto;
+
+        // Inherit the opacity when focus is received for better focus outline contrast.
+        &:not(:disabled):not(.disabled) {
+            @include hover-focus() {
+                opacity: inherit;
+            }
+        }
+    }
 }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index dc74d32b7f6..172d6fafb5c 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -19948,6 +19948,11 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
     left: 50%;
     transform: translate(-50%, -50%); }
 
+.modal .close {
+  margin: -0.8rem -0.8rem -0.8rem auto; }
+  .modal .close:not(:disabled):not(.disabled):hover, .modal .close:not(:disabled):not(.disabled):focus {
+    opacity: inherit; }
+
 .layout.fullscreen {
   height: 100vh;
   position: fixed;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 11474d12222..ca294fe0860 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -19894,6 +19894,11 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
     left: 50%;
     transform: translate(-50%, -50%); }
 
+.modal .close {
+  margin: -0.8rem -0.8rem -0.8rem auto; }
+  .modal .close:not(:disabled):not(.disabled):hover, .modal .close:not(:disabled):not(.disabled):focus {
+    opacity: inherit; }
+
 .layout.fullscreen {
   height: 100vh;
   position: fixed;