ChristopherRotnes · ChristopherRotnes · May 19, 2026 · May 19, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 All notable changes to Workout Lens are documented here.
 
+## [1.5.16] — 2026-05-19
+
+### Accessibility
+- **Fix WCAG AA contrast violations across codebase (issue #262)** — systematic audit identified four categories of failures:
+  - **Filled accent backgrounds**: `--accent` (#ee2c80, 3.95:1 vs white — FAIL) was used as `background` with white text on the Home CTA button, MuscleMapConfirm Today/Other-day pills and Save CTA, Settings save button, and Report add-to-library button. Replaced with `--accent-active` (#b5116a, ~6.45:1 vs white — PASS) in all five locations.
+  - **`--accent-soft` text in light mode**: `--accent-soft: #ff7eb6` used as text colour on `--accent-bg-14` backgrounds produces ~1.77:1 in light mode (FAIL). Added `--accent-soft: #b5116a` override to the `[data-theme="g10"]` block in `carbon-tokens.css`; dark mode keeps the existing `#ff7eb6` (~7.7:1 on dark bg — PASS).
+  - **`--exercise` label text on `--exercise-soft` background**: 10px mono label in `OvelsePicker` used `--exercise` (#1a8c4e in light mode) on a pale `--exercise-soft` background (~3.79:1 — FAIL). Changed to `--cds-text-primary` for that label; green identity preserved via border and icon.
+  - **Focus rings suppressed on raw inputs**: inline `outline: none` on custom-styled `<input>` elements in `ExFlyt`, `GruppetimePicker`, `OvelsePicker`, and `Planlegger` overrode the app-level CSS rule. Removed all four inline suppressions and broadened `app.css` to cover `input:not(.cds--text-input):not(.cds--search-input):focus-visible`.
+
 ## [1.5.15] — 2026-05-19
 
 ### Accessibility

diff --git a/CLAUDE.md b/CLAUDE.md
diff --git a/app/package.json b/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "workout-lens",
   "private": true,
-  "version": "1.5.15",
+  "version": "1.5.16",
   "author": "Christopher Rotnes",
   "license": "MIT",
   "repository": {

diff --git a/app/src/components/ExFlyt.jsx b/app/src/components/ExFlyt.jsx
@@ -70,7 +70,6 @@ export default function ExFlyt({ libraryExercises, onAdd, onClose }) {
                 borderRadius: 8,
                 color: "var(--cds-text-primary)",
                 fontFamily: "var(--cds-font-sans)", fontSize: 14,
-                outline: "none",
               }}
             />
           </div>
@@ -163,7 +162,6 @@ export default function ExFlyt({ libraryExercises, onAdd, onClose }) {
               borderRadius: 8,
               color: "var(--cds-text-primary)",
               fontFamily: "var(--cds-font-sans)", fontSize: 14,
-              outline: "none",
             }}
           />
           <Button kind="primary" size="sm" renderIcon={Add} onClick={handleQuickAdd} disabled={!quickName.trim()}>

diff --git a/app/src/components/GruppetimePicker.jsx b/app/src/components/GruppetimePicker.jsx
@@ -139,7 +139,6 @@ export default function GruppetimePicker({ onBack, onEditTemplate }) {
                   borderRadius: 8,
                   color: "var(--cds-text-primary)",
                   fontFamily: "var(--cds-font-sans)", fontSize: 14,
-                  outline: "none",
                 }}
               />
             </div>

diff --git a/app/src/components/Home.jsx b/app/src/components/Home.jsx
@@ -112,7 +112,7 @@ export default function Home({ onShowHistoryWithDate }) {
             onClick={onShowLogger}
             style={{
               width: "100%", padding: "16px 20px",
-              background: "var(--accent)", color: "#fff",
+              background: "var(--accent-active)", color: "#fff",
               border: "none", borderRadius: "var(--r-pill)",
               fontFamily: "var(--cds-font-sans)", fontWeight: 600, fontSize: 15,
               cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "space-between",

diff --git a/app/src/components/MuscleMapConfirm.jsx b/app/src/components/MuscleMapConfirm.jsx
@@ -56,7 +56,7 @@ export default function MuscleMapConfirm({
             onClick={() => { setUseTodayDate(true); dispatch({ type: "SET_SESSION_DATE", date: todayStr }); }}
             style={{
               flex: 1, padding: "10px 0",
-              background: useTodayDate ? "var(--accent)" : "transparent",
+              background: useTodayDate ? "var(--accent-active)" : "transparent",
               color: useTodayDate ? "#fff" : "var(--cds-text-primary)",
               border: "none", cursor: "pointer",
               fontFamily: "var(--cds-font-sans)", fontSize: 13, fontWeight: useTodayDate ? 600 : 400,
@@ -69,7 +69,7 @@ export default function MuscleMapConfirm({
             onClick={() => setUseTodayDate(false)}
             style={{
               flex: 1, padding: "10px 0",
-              background: !useTodayDate ? "var(--accent)" : "transparent",
+              background: !useTodayDate ? "var(--accent-active)" : "transparent",
               color: !useTodayDate ? "#fff" : "var(--cds-text-primary)",
               border: "none", borderLeft: "1px solid var(--border-subtle-wl)", cursor: "pointer",
               fontFamily: "var(--cds-font-sans)", fontSize: 13, fontWeight: !useTodayDate ? 600 : 400,
@@ -182,7 +182,7 @@ export default function MuscleMapConfirm({
             disabled={!hasEnabled}
             style={{
               width: "100%", padding: "14px 20px",
-              background: hasEnabled ? "var(--accent)" : "var(--cds-layer-01)",
+              background: hasEnabled ? "var(--accent-active)" : "var(--cds-layer-01)",
               border: "none",
               borderRadius: "var(--r-pill)",
               color: hasEnabled ? "#fff" : "var(--text-muted-wl)",

diff --git a/app/src/components/OvelsePicker.jsx b/app/src/components/OvelsePicker.jsx
@@ -137,7 +137,7 @@ export default function OvelsePicker({ onBack }) {
                 <p style={{ fontFamily: "var(--cond)", fontSize: 15, fontWeight: 700, color: "var(--cds-text-primary)", margin: "0 0 2px" }}>
                   {t("settSammen.nyOvelse")}
                 </p>
-                <p style={{ fontFamily: "var(--cds-font-mono)", fontSize: 10, letterSpacing: "0.1em", color: "var(--exercise)", margin: 0 }}>
+                <p style={{ fontFamily: "var(--cds-font-mono)", fontSize: 10, letterSpacing: "0.1em", color: "var(--cds-text-primary)", margin: 0 }}>
                   {t("ovelsePicker.nyOvelseSubtitle")}
                 </p>
               </div>
@@ -195,7 +195,6 @@ export default function OvelsePicker({ onBack }) {
                   borderRadius: 8,
                   color: "var(--cds-text-primary)",
                   fontFamily: "var(--cds-font-sans)", fontSize: 14,
-                  outline: "none",
                 }}
               />
             </div>

diff --git a/app/src/components/Planlegger.jsx b/app/src/components/Planlegger.jsx
@@ -80,7 +80,6 @@ function TemplatePickerSheet({ templates, onSelect, onClose }) {
                 color: "var(--cds-text-primary)",
                 fontFamily: "var(--cds-font-sans)",
                 fontSize: 14,
-                outline: "none",
                 boxSizing: "border-box",
               }}
             />

diff --git a/app/src/components/Report.jsx b/app/src/components/Report.jsx
@@ -608,7 +608,7 @@ export default function Report({ prefill, onPrefillConsumed }) {
                                 disabled={savingRec === r.name}
                                 style={{
                                   width: 28, height: 28, borderRadius: "50%",
-                                  background: savingRec === r.name ? "var(--cds-layer-02)" : "var(--accent)",
+                                  background: savingRec === r.name ? "var(--cds-layer-02)" : "var(--accent-active)",
                                   border: "none",
                                   cursor: savingRec === r.name ? "default" : "pointer",
                                   color: savingRec === r.name ? "var(--cds-text-secondary)" : "#fff",

diff --git a/app/src/components/Settings.jsx b/app/src/components/Settings.jsx
@@ -240,7 +240,7 @@ export default function Settings({ onShowIntro }) {
             onClick={handleDisplayNameSave}
             disabled={displayNameSaving || !isDirty || !displayNameDraft.trim()}
             style={{
-              padding: "10px 20px", background: "var(--accent)", color: "#fff",
+              padding: "10px 20px", background: "var(--accent-active)", color: "#fff",
               border: 0, cursor: "pointer", fontFamily: "var(--cds-font-sans)",
               fontSize: 13, fontWeight: 500,
               opacity: (displayNameSaving || !isDirty || !displayNameDraft.trim()) ? 0.45 : 1,

diff --git a/app/src/styles/app.css b/app/src/styles/app.css
@@ -23,8 +23,8 @@ button:not(.cds--btn):focus-visible,
   outline-offset: 2px;
 }
 
-/* Custom number inputs suppress outline inline; restore it here */
-input[type=number]:focus-visible {
+/* Restore focus ring on all raw (non-Carbon) inputs */
+input:not(.cds--text-input):not(.cds--search-input):focus-visible {
   outline: 2px solid #0f62fe;
   outline-offset: 0;
 }

diff --git a/app/src/styles/carbon-tokens.css b/app/src/styles/carbon-tokens.css
@@ -434,6 +434,7 @@
   --text-subdued-wl:  #6f6f6f;
   --text-disabled-wl: rgba(22,22,22,.25);
   --exercise:         #1a8c4e;
+  --accent-soft:      #b5116a;
 }
 
 /* Element defaults — semantic tags, productive sizing */