diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_AccessibleButton.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_AccessibleButton.scss
index b82ebf012d..41dd976960 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_AccessibleButton.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_AccessibleButton.scss
@@ -16,6 +16,6 @@ limitations under the License.
 
 .mx_AccessibleButton:focus {
     outline: 0;
-    filter: brightness(200%);
+    filter: brightness($focus-brightness);
 }
 
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index e105e7b4d5..b601191348 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -15,6 +15,8 @@ $accent-color: #76CFA6;
 
 $selection-fg-color: $primary-bg-color;
 
+$focus-brightness: 125%;
+
 // red warning colour
 $warning-color: #ff0064;
 
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 6d435fab8a..72c21b7572 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -15,6 +15,8 @@ $accent-color: #76CFA6;
 
 $selection-fg-color: $primary-fg-color;
 
+$focus-brightness: 200%;
+
 // red warning colour
 $warning-color: #ff0064;