diff --git a/src/ui/app.css b/src/ui/app.css
index f379afcd..7bca89db 100644
--- a/src/ui/app.css
+++ b/src/ui/app.css
@@ -603,10 +603,34 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che
   .btn { transition: none; }
 }
 
+/* Forced colours flatten backgrounds, which would erase the toggle track and
+   knob and turn every colour swatch into the same empty circle. Draw the
+   toggle with system colours, and let swatches and the highlight sample keep
+   their real colours, since the colour is the choice being made. */
 @media (forced-colors: active) {
   .btn.nav-button[data-active="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
   /* Focus must still read as focus on the current page's own button. */
   .btn.nav-button[data-active="true"]:focus-visible { outline: 3px solid CanvasText; outline-offset: 3px; }
+  .toggle, .toggle::after { forced-color-adjust: none; }
+  .toggle { border: 2px solid CanvasText; background: Canvas; }
+  .toggle::after { top: 1px; left: 1px; background: CanvasText; }
+  .toggle-row input:checked + .toggle { border-color: Highlight; background: Highlight; }
+  .toggle-row input:checked + .toggle::after { background: HighlightText; }
+  /* Same specificity as the checked rules and later, so disabled wins. */
+  .toggle-row[data-disabled="true"] input + .toggle { border-color: GrayText; background: Canvas; }
+  .toggle-row[data-disabled="true"] input + .toggle::after { background: GrayText; }
+  .toggle-row[data-disabled="true"] input:checked + .toggle { background: GrayText; }
+  .toggle-row[data-disabled="true"] input:checked + .toggle::after { background: Canvas; }
+  /* Opting out of forced colours would also keep the page's focus blue. */
+  .toggle-row input:focus-visible + .toggle { outline-color: CanvasText; }
+  .color-swatch, .scanner-sample { forced-color-adjust: none; }
+  /* A white or yellow swatch would vanish on a light Canvas without an edge. */
+  .color-swatch, .color-swatch.white { border: 2px solid CanvasText; }
+  .color-options label:has(input:checked), .scanner-colours label:has(input:checked) { border-color: Highlight; }
+  .switch-practice-blocks li[data-selected="true"] { border: 4px solid Highlight; }
+  /* The step rail is drawn with backgrounds only. */
+  .setup-progress span { forced-color-adjust: none; background: GrayText; }
+  .setup-progress span[data-active="true"] { background: Highlight; }
 }
 
 /* --- Responsive --------------------------------------------------------------- */