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

OP OpenVibers committed 10 Oct 2026 · c3e63eb1e4 · 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/trade.css b/public/css/trade.css
iindex f248570..70069df 100644
---- a/public/css/trade.css
++++ b/public/css/trade.css
@@@ -42,7 +42,7 @@ input, textarea, select { font: inherit; color: var(--text-primary); background:
  textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
  input[type=checkbox], input[type=radio] { width: auto; }
  .search input[type=search] { width: min(420px, 100%); }
--button { display: inline-block; margin-top: 8px; font: inherit; font-weight: 600; background: var(--accent, #3b82f6); color: var(--on-accent, #fff); border: 0; border-radius: 6px; padding: 7px 14px; cursor: pointer; }
++button { display: inline-block; margin-top: 8px; font: inherit; font-weight: 600; background: var(--accent-strong, var(--accent, #3472d8)); color: var(--on-accent-strong, var(--on-accent, #fff)); border: 0; border-radius: 6px; padding: 7px 14px; cursor: pointer; }
  button.danger { background: var(--danger, #ef4444); }
  form.inline { display: inline; }
  form.inline button { margin: 0; padding: 2px 10px; font-size: .85rem; }