diff --git a/ts/lib/components/Select.svelte b/ts/lib/components/Select.svelte
index 24b7bc12e..bbe1d8866 100644
--- a/ts/lib/components/Select.svelte
+++ b/ts/lib/components/Select.svelte
@@ -262,6 +262,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         display: flex;
         flex-flow: row;
         justify-content: space-between;
+        border-color: var(--border-ui);
 
         .inner {
             flex-grow: 1;
@@ -287,13 +288,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .chevron {
         height: 100%;
         align-self: flex-end;
-        border-left: 1px solid var(--border-subtle);
+        border-left: 1px solid var(--border-ui);
     }
 
     :global([dir="rtl"]) {
         .chevron {
             border-left: none;
-            border-right: 1px solid var(--border-subtle);
+            border-right: 1px solid var(--border-ui);
         }
     }
 </style>
diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte
index f52845a4d..60462d6b1 100644
--- a/ts/lib/components/SpinBox.svelte
+++ b/ts/lib/components/SpinBox.svelte
@@ -210,7 +210,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .spin-box {
         width: 100%;
         background: var(--canvas-inset);
-        border: 1px solid var(--border);
+        border: 1px solid var(--border-ui);
         border-radius: var(--border-radius);
         overflow: hidden;
         position: relative;
diff --git a/ts/lib/components/Switch.svelte b/ts/lib/components/Switch.svelte
index d48f46fb3..560ee403b 100644
--- a/ts/lib/components/Switch.svelte
+++ b/ts/lib/components/Switch.svelte
@@ -31,6 +31,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .form-check-input {
+        border-color: var(--border-ui);
         -webkit-appearance: none;
         appearance: none;
         height: 1.5em;
diff --git a/ts/lib/components/TitledContainer.svelte b/ts/lib/components/TitledContainer.svelte
index 3ea932ba3..fcf2a0249 100644
--- a/ts/lib/components/TitledContainer.svelte
+++ b/ts/lib/components/TitledContainer.svelte
@@ -56,7 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         page-break-inside: avoid;
     }
     h1 {
-        border-bottom: 1px solid var(--border);
+        border-bottom: 1px solid var(--border-ui);
         padding-bottom: 0.25em;
     }
     .help-badge {
diff --git a/ts/lib/sass/_color-palette.scss b/ts/lib/sass/_color-palette.scss
index 940e7531c..fa8ce1791 100644
--- a/ts/lib/sass/_color-palette.scss
+++ b/ts/lib/sass/_color-palette.scss
@@ -17,6 +17,7 @@ $color-palette: (
         7: #afafaf,
         8: #999999,
         9: #858585,
+       10: #949494,
     ),
     darkgray: (
         0: #737373,
diff --git a/ts/lib/sass/_vars.scss b/ts/lib/sass/_vars.scss
index a8da766ad..9d75aa48d 100644
--- a/ts/lib/sass/_vars.scss
+++ b/ts/lib/sass/_vars.scss
@@ -178,6 +178,13 @@ $vars: (
                     dark: palette(blue, 5),
                 ),
             ),
+            ui: (
+                "Border color of ui elements, designed for minimum A11Y contrast against the background.",
+                (
+                    light: palette(lightgray, 10),
+                    dark: palette(blue, 5),
+                ),
+            ),
         ),
         button: (
             bg: (