openvibers/openvibe.watch Commits

Watch: filled controls use the theme's readable accent pair (WCAG AA contrast) (#17)

OP OpenVibers committed 10 Oct 2026 · 889e7419d7 · 1 file, +1 −1

Accessibility (WCAG AA contrast). Filled buttons, chips and badges painted with the plain theme accent and white text now use the theme's readable pair: `background: var(--accent-strong, var(--accent, …))` with `color: var(--on-accent-strong, …)`.

White on the default accent `#3b82f6` is 3.68:1, under AA's 4.5:1 for normal-size text. The strong pair is 4.62:1 in the default theme, and every built-in theme defines it, using dark text on the light accents. The release UX check's axe run flagged this as `color-contrast` (serious), for example on the search buttons of openvibe.trade and openvibe.deals.

The change is mechanical and limited to rule blocks that set both an accent background and a white or `--on-accent` text colour. Bars, dots and outlines are untouched. A border drawn in the same accent follows the fill, and an existing `--on-accent` fallback is kept. Affected tests pass (`ov test`). The matching shared half is openvibe-shared 2.20.3.

Changes

ddiff --git a/public/css/app.css b/public/css/app.css
iindex cf1db10..b0a7f4e 100644
---- a/public/css/app.css
++++ b/public/css/app.css
@@@ -38,7 +38,7 @@ form.inline { display: inline; }
  /* ── Buttons ────────────────────────────────────────────── */
  .btn { display: inline-block; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border-light, #2c3d5c); background: var(--bg-card, #131c2e); color: var(--text-primary, #e6edf7); text-decoration: none; font-size: .92rem; }
  .btn:hover { border-color: var(--accent, #3b82f6); }
--.btn.primary { background: var(--accent, #3b82f6); border-color: var(--accent, #3b82f6); color: #fff; }
++.btn.primary { background: var(--accent-strong, var(--accent, #3472d8)); border-color: var(--accent-strong, var(--accent, #3472d8)); color: var(--on-accent-strong, var(--on-accent, #fff)); }
  .btn.danger { border-color: var(--error, #ef4444); color: var(--error, #ef4444); }
  .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
  .pager { display: flex; gap: 12px; align-items: center; margin: 14px 0; }