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

OP OpenVibers committed 10 Oct 2026 · b9261ad42d · 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/news.css b/public/css/news.css
iindex b893a8e..c1b7b6a 100644
---- a/public/css/news.css
++++ b/public/css/news.css
@@@ -57,7 +57,7 @@ label input[type=checkbox] { margin-right: 6px; }
  input, textarea, select { width: 100%; font: inherit; color: var(--text-primary); background: var(--bg-input, #0d1424); border: 1px solid var(--border-light, #2c3d5c); border-radius: 6px; padding: 8px 10px; }
  input[type=checkbox] { width: auto; }
  textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; }
--button, .button { display: inline-block; margin-top: 10px; font: inherit; font-weight: 600; background: var(--accent, #3b82f6); color: var(--on-accent, #fff); border: 0; border-radius: 6px; padding: 8px 16px; cursor: pointer; text-decoration: none; }
++button, .button { display: inline-block; margin-top: 10px; 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: 8px 16px; cursor: pointer; text-decoration: none; }
  form.inline { display: inline; }
  form.inline select { width: auto; }
  form.inline button { margin: 0 0 0 8px; padding: 2px 10px; font-size: .85rem; }