openvibers/openrestream Commits

The filled button reads at AA (#295)

OP OpenVibers committed 2 days ago · 9479c303f2 · 2 files, +12 −1

White on the light accent (#3b82f6) is 3.7:1, which the release browser check's axe run failed (color-contrast, serious) on the home page every run. The filled button now sits on the strong accent (#2563eb, 5.2:1) with its own text colour.

Changes

ddiff --git a/server/ui/layout.js b/server/ui/layout.js
iindex c3871b6..f7ad66d 100644
---- a/server/ui/layout.js
++++ b/server/ui/layout.js
@@@ -44,7 +44,7 @@ main.ore .sc-hero,main.ore .sc-sec,main.ore .sc-cta{padding-left:0;padding-right
.ore-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ore-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:14px;border:1px solid var(--ore-line);color:var(--ore-text)!important;font-weight:750;text-decoration:none;transition:transform .15s,border-color .15s}
.ore-btn:hover{border-color:color-mix(in srgb,var(--accent,#3b82f6) 55%,var(--ore-line));transform:translateY(-1px)}
--.ore-btn-primary{background:var(--accent,#3b82f6);border-color:transparent;color:var(--on-accent,#fff)!important;box-shadow:0 12px 30px -14px var(--accent,#3b82f6)}
++.ore-btn-primary{background:var(--accent-strong,#2563eb);border-color:transparent;color:var(--on-accent-strong,#fff)!important;box-shadow:0 12px 30px -14px var(--accent,#3b82f6)}
.ore-note{margin:14px 0 0;font-size:.86rem;color:var(--ore-muted)}
.ore-flow{position:relative;display:grid;grid-template-columns:minmax(0,104px) 22px minmax(0,118px) minmax(230px,1fr);align-items:center;gap:0;padding:22px;border:1px solid var(--ore-line);border-radius:24px;background:radial-gradient(120% 120% at 0% 50%,color-mix(in srgb,var(--accent,#3b82f6) 14%,transparent),transparent 60%),var(--ore-panel);counter-reset:ore-on}
.ore-src,.ore-hub{display:grid;justify-items:center;gap:3px;text-align:center;padding:12px 8px;border-radius:18px;background:var(--ore-bg);border:1px solid var(--ore-line);min-width:0}
ddiff --git a/test/button-contrast.test.js b/test/button-contrast.test.js
nnew file mode 100644
iindex 0000000..6e8a524
---- /dev/null
++++ b/test/button-contrast.test.js
@@@ -0,0 +1,11 @@
++'use strict';
++// The filled button reads at AA: white on the strong accent (#2563eb, 5.2:1), not on the light accent (#3b82f6, 3.7:1),
++// which the release browser check's axe run failed as serious (color-contrast) on the home page (11-12).
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++const css = fs.readFileSync(path.join(__dirname, '..', 'server', 'ui', 'layout.js'), 'utf8');
++const rule = (css.match(/\.ore-btn-primary\{[^}]*\}/) || [''])[0];
++assert.match(rule, /background:var\(--accent-strong,#2563eb\)/, 'the strong accent behind the text');
++assert.match(rule, /color:var\(--on-accent-strong,#fff\)/, 'its own text colour');
++console.log('button contrast: the filled button is white on the strong accent');