Quest: reward amounts on the quest list pass WCAG AA contrast (#32)

OP OpenVibers committed 12 Oct 2026 · 8e6d8ec3f8 · 1 file, +1 −1

An axe (WCAG 2.1 A/AA) sweep of every OpenVibe home page found 6 serious color-contrast failures on openvibe.quest: the small reward amounts (`.reward-item small`) used `--text-muted` on the accent-tinted chip. They use `--text-secondary` now. CSS only.

Changes

ddiff --git a/public/css/app.css b/public/css/app.css
iindex eb2a4ef..c430595 100644
---- a/public/css/app.css
++++ b/public/css/app.css
@@@ -73,7 +73,7 @@ p.lede { font-size: 1.05rem; color: var(--text-secondary, #96a7c2); max-width: 7
  .reward-badge strong { color: var(--text-primary, #e6edf7); }
  .reward-coins { color: var(--warning, #f59e0b); border-color: color-mix(in srgb, var(--warning, #f59e0b) 40%, transparent); }
  .reward-item { font-size: .78rem; padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 45%, transparent); color: var(--text-primary, #e6edf7); background: color-mix(in srgb, var(--accent, #3b82f6) 10%, transparent); }
--.reward-item small { color: var(--text-muted, #7386a3); }
++.reward-item small { color: var(--text-secondary, #96a7c2); }   /* muted failed AA on the tinted chip */
  .reward-coins.soon { color: var(--text-muted, #7386a3); border-style: dashed; border-color: var(--border-light, #2c3d5c); }
  @media (prefers-reduced-motion: reduce) { .quest { transition: none; } }
  .steps { margin: .4rem 0; }