openvibers/openvibe.network Commits

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

OP OpenVibers committed 10 Oct 2026 · 9baadc4e1d · 4 files, +5 −5

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/admin.css b/public/css/admin.css
iindex ee143c87..0954437d 100644
---- a/public/css/admin.css
++++ b/public/css/admin.css
@@@ -65,7 +65,7 @@ body{min-height:100%;color:var(--text);font-family:'Inter',-apple-system,BlinkMa
  
  /* Buttons */
  .btn{padding:8px 16px;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
--.btn-primary{background:var(--accent);color:var(--on-accent,#fff)}
++.btn-primary{background:var(--accent-strong, var(--accent, #3472d8));color:var(--on-accent-strong, var(--on-accent,#fff))}
  .btn-primary:hover{background:var(--accent-dark)}
  .btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
  .btn-outline:hover{border-color:var(--accent-dark);color:var(--accent-light)}
ddiff --git a/public/css/my.css b/public/css/my.css
iindex e070eea9..5a5f4e8b 100644
---- a/public/css/my.css
++++ b/public/css/my.css
@@@ -37,7 +37,7 @@ body{min-height:100%;color:var(--text);font-family:'Inter',-apple-system,BlinkMa
  .section-tabs button:hover:not(.active){color:var(--text)}
  
  /* Approvals (my/approvals.js): one row per waiting request, and the count on its tab */
--.section-tabs .tab-badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;line-height:18px;text-align:center}
++.section-tabs .tab-badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--accent-strong, var(--accent, #3472d8));color:var(--on-accent-strong, var(--on-accent, #fff));font-size:11px;line-height:18px;text-align:center}
  .approval{border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;background:var(--bg-secondary)}
  .approval-summary{font-weight:600;color:var(--text);margin-bottom:6px;overflow-wrap:anywhere}
  .approval-meta{font-size:12px;color:var(--text-secondary);margin-bottom:10px;overflow-wrap:anywhere}
@@@ -86,7 +86,7 @@ body{min-height:100%;color:var(--text);font-family:'Inter',-apple-system,BlinkMa
  .btn{
      padding:8px 20px;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;
  }
--.btn-primary{background:var(--accent);color:var(--on-accent,#fff)}
++.btn-primary{background:var(--accent-strong, var(--accent, #3472d8));color:var(--on-accent-strong, var(--on-accent,#fff))}
  .btn-primary:hover{background:var(--accent-dark)}
  .btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
  .btn-outline:hover{border-color:var(--accent-dark);color:var(--accent-light)}
ddiff --git a/public/verify-email.html b/public/verify-email.html
iindex 62b3dc91..8d881729 100644
---- a/public/verify-email.html
++++ b/public/verify-email.html
@@@ -47,7 +47,7 @@ p{color:var(--text-secondary);font-size:14px;line-height:1.6}
  .actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;border:1px solid var(--border);color:var(--text-primary);background:var(--bg-secondary);transition:transform .15s,background .15s,border-color .15s}
  .btn:hover{transform:translateY(-1px);border-color:var(--accent)}
--.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
++.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))}
  .btn-primary:hover{filter:brightness(1.08)}
  .hint{margin-top:18px;font-size:12px;color:var(--text-muted)}
  .hidden{display:none}
ddiff --git a/server/profile/public.js b/server/profile/public.js
iindex 5223584f..ee9ca439 100644
---- a/server/profile/public.js
++++ b/server/profile/public.js
@@@ -349,7 +349,7 @@ a{color:var(--accent)}
  .pf-card a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;border-radius:12px;border:1px solid var(--border);border-bottom:3px solid var(--rc);background:var(--bg-secondary);text-decoration:none;color:inherit;text-align:center;height:100%}
  .pf-card a:hover,.pf-card a:focus-visible{border-color:var(--rc);background:color-mix(in srgb,var(--rc) 8%,var(--bg-secondary))}
  .pf-card-name{font-size:.85rem;font-weight:600;overflow-wrap:anywhere}
--.pf-worn-tag{position:absolute;top:6px;right:6px;font-size:.62rem;font-weight:700;padding:.05rem .4rem;border-radius:999px;background:var(--accent);color:var(--on-accent,#fff)}
++.pf-worn-tag{position:absolute;top:6px;right:6px;font-size:.62rem;font-weight:700;padding:.05rem .4rem;border-radius:999px;background:var(--accent-strong, var(--accent, #3472d8));color:var(--on-accent-strong, var(--on-accent,#fff))}
  .pf-art{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rc) 30%,transparent),color-mix(in srgb,var(--rc) 8%,var(--bg-card)));flex:none;overflow:hidden}
  .pf-art-md{width:56px;height:56px;font-size:28px}.pf-art-lg{width:68px;height:68px;font-size:34px}
  .pf-art img{width:100%;height:100%;object-fit:cover}