openvibers/openvibe.tools Commits

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

OP OpenVibers committed 10 Oct 2026 · 2f3288213c · 3 files, +16 −16

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/apps/docs/public/css/style.css b/apps/docs/public/css/style.css
iindex 66890fc..47e054a 100644
---- a/apps/docs/public/css/style.css
++++ b/apps/docs/public/css/style.css
@@@ -97,9 +97,9 @@ body {
      border-color: var(--accent-dark);
  }
  .tool-tab.active {
--    background: var(--accent);
--    color: #fff;
--    border-color: var(--accent);
++    background: var(--accent-strong, var(--accent, #3472d8));
++    color: var(--on-accent-strong, var(--on-accent, #fff));
++    border-color: var(--accent-strong, var(--accent, #3472d8));
  }
  
  /* ── Upload Zone ────────────────────────────────────────────── */
@@@ -294,9 +294,9 @@ body {
      text-decoration: none;
  }
  .btn-primary {
--    background: var(--accent);
--    color: #fff;
--    border-color: var(--accent);
++    background: var(--accent-strong, var(--accent, #3472d8));
++    color: var(--on-accent-strong, var(--on-accent, #fff));
++    border-color: var(--accent-strong, var(--accent, #3472d8));
  }
  .btn-primary:hover:not(:disabled) {
      background: var(--accent-light);
ddiff --git a/apps/img/public/css/style.css b/apps/img/public/css/style.css
iindex aad735a..1f5023e 100644
---- a/apps/img/public/css/style.css
++++ b/apps/img/public/css/style.css
@@@ -97,9 +97,9 @@ body {
      border-color: var(--accent-dark);
  }
  .tool-tab.active {
--    background: var(--accent);
--    color: #fff;
--    border-color: var(--accent);
++    background: var(--accent-strong, var(--accent, #3472d8));
++    color: var(--on-accent-strong, var(--on-accent, #fff));
++    border-color: var(--accent-strong, var(--accent, #3472d8));
  }
  
  /* ── Upload Zone ────────────────────────────────────────────── */
@@@ -216,9 +216,9 @@ body {
      color: var(--text-primary);
  }
  .format-btn.active, .aspect-btn.active {
--    background: var(--accent);
--    color: #fff;
--    border-color: var(--accent);
++    background: var(--accent-strong, var(--accent, #3472d8));
++    color: var(--on-accent-strong, var(--on-accent, #fff));
++    border-color: var(--accent-strong, var(--accent, #3472d8));
  }
  
  /* Slider */
@@@ -303,8 +303,8 @@ body {
      text-decoration: none;
  }
  .btn-primary {
--    background: var(--accent);
--    color: #fff;
++    background: var(--accent-strong, var(--accent, #3472d8));
++    color: var(--on-accent-strong, var(--on-accent, #fff));
  }
  .btn-primary:hover:not(:disabled) { background: var(--accent-dark); }
  .btn-primary:disabled { opacity: .4; cursor: not-allowed; }
ddiff --git a/apps/yt/public/css/style.css b/apps/yt/public/css/style.css
iindex d5d71b7..d59ad37 100644
---- a/apps/yt/public/css/style.css
++++ b/apps/yt/public/css/style.css
@@@ -131,8 +131,8 @@ a:hover { text-decoration: underline; }
  }
  .btn:active { transform: scale(0.97); }
  .btn-primary {
--    background: var(--accent);
--    color: #fff;
++    background: var(--accent-strong, var(--accent, #3472d8));
++    color: var(--on-accent-strong, var(--on-accent, #fff));
  }
  .btn-primary:hover {
      background: var(--accent-hover);