openvibers/openvibe.billing Commits

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

OP OpenVibers committed 10 Oct 2026 · 459485fe28 · 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/server/console/views.js b/server/console/views.js
iindex 1b67e8c..3ac2335 100644
---- a/server/console/views.js
++++ b/server/console/views.js
@@@ -49,7 +49,7 @@ label{display:grid;gap:4px;font-size:14px}label.check{display:flex;gap:8px;align
  input[type=text],select,textarea{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--fg);width:100%}
  textarea{min-height:70px}
  button{font:inherit;padding:7px 14px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
--button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.danger{border-color:var(--bad);color:var(--bad)}
++button.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))}button.danger{border-color:var(--bad);color:var(--bad)}
  button.link{border:0;background:none;padding:0;color:var(--accent);text-decoration:underline}
  fieldset{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0}fieldset[disabled]{opacity:.6}
  legend{padding:0 6px;font-weight:600}