openvibers/openvibe.mediahub Commits

Pics: accent text and table headers reach AA on light themes (#242)

OP OpenVibers committed 12 days ago · 1f18f6617f · 2 files, +14 −2

Changes

ddiff --git a/public/css/pics.css b/public/css/pics.css
iindex 8081356..30f664a 100644
---- a/public/css/pics.css
++++ b/public/css/pics.css
@@@ -6,7 +6,7 @@
--ovp-pink: #f472b6;
--ovp-pink-soft: #f9a8d4;
--ovp-on-pink: #1f0a17;
-- --ovp-accent-text: color-mix(in srgb, var(--ovp-pink) 72%, var(--text-primary, #e6edf7));
++ --ovp-accent-text: color-mix(in srgb, var(--ovp-pink) 60%, var(--text-primary, #e6edf7)); /* 72% was 4.3:1 on white */
--ovp-card: var(--bg-card, var(--bg-secondary, #101828));
--ovp-line: var(--border, #1f2d47);
--ovp-line-strong: var(--border-light, #2c3d5c);
@@@ -161,7 +161,7 @@
.ovp-sizes { overflow-x: auto; }
.ovp-size-table { border-collapse: collapse; min-width: 320px; font-variant-numeric: tabular-nums; }
.ovp-size-table th, .ovp-size-table td { padding: 8px 12px; border-bottom: 1px solid var(--border, #1f2d47); text-align: left; white-space: nowrap; }
--.ovp-size-table thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint, #7386a3); font-weight: 700; }
++.ovp-size-table thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ovp-faint); font-weight: 700; }
.ovp-size-table tbody th { font-weight: 700; }
.ovp-size-table a { display: inline-block; min-width: 44px; padding: 4px 0; }
ddiff --git a/test/pics-contrast.test.js b/test/pics-contrast.test.js
nnew file mode 100644
iindex 0000000..7d9de0b
---- /dev/null
++++ b/test/pics-contrast.test.js
@@@ -0,0 +1,12 @@
++'use strict';
++// Pics' pink accent text and its table headers reach WCAG AA on light themes (axe on Daylight, 2026-11-01): the
++// accent mix was 72% pink (4.3:1 on white) and the headers named --text-faint, which no theme sets (3.7:1 fallback).
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++
++const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'pics.css'), 'utf8');
++assert.match(css, /--ovp-accent-text: color-mix\(in srgb, var\(--ovp-pink\) 60%, var\(--text-primary, #e6edf7\)\);/);
++assert.match(css, /\.ovp-size-table thead th \{[^}]*color: var\(--ovp-faint\);/);
++assert.ok(!/var\(--text-faint/.test(css), 'no colour names --text-faint');
++console.log('pics contrast: all checks passed');