mirror of
https://github.com/Donkie/Spoolman.git
synced 2026-10-19 08:39:58 -05:00
client_v2: fix low-contrast text/accent tokens for WCAG AA
The mobile a11y audit reported color-contrast (serious) on ~11-17 nodes per page, the nav tabs being the recurring offender. Every flagged node routed through a design token, so retune the tokens rather than patch components: --text-muted/--text-dim/--text-faint and light --accent-soft now clear 4.5:1 on the surfaces they sit on in both themes (down to the lightest dark surface and darkest light surface), keeping the muted->dim->faint ramp monotonic. --text-2 already passed and is unchanged.
This commit is contained in:
1 parent
386ec36d1f
commit
18214ee0f8
1 file changed
+14
-9
+14
-9
@@ -24,12 +24,15 @@
|
||||
--border-input: #383838;
|
||||
--hairline: rgba(255, 255, 255, 0.05);
|
||||
|
||||
/* Text */
|
||||
/* Text — muted/dim/faint are tuned to clear WCAG AA (4.5:1) on the dark
|
||||
* surfaces they sit on (down to the lightest, surface-raised #2e2e2e) while
|
||||
* staying monotonic (muted brightest, faint dimmest). See app.css light
|
||||
* theme for the mirrored values. */
|
||||
--text: #ececec;
|
||||
--text-2: #c9c9c9;
|
||||
--text-muted: #8a8a8a;
|
||||
--text-dim: #777;
|
||||
--text-faint: #666;
|
||||
--text-muted: #a0a0a0;
|
||||
--text-dim: #979797;
|
||||
--text-faint: #909090;
|
||||
|
||||
/* Accent (warm orange) */
|
||||
--accent: #be682f;
|
||||
@@ -94,19 +97,21 @@
|
||||
--border-input: #ceccc6;
|
||||
--hairline: rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* Text */
|
||||
/* Text — muted/dim/faint darkened to clear WCAG AA (4.5:1) on the light
|
||||
* surfaces they sit on (down to the darkest, surface-sunken #e8e6e2) while
|
||||
* staying monotonic (muted darkest, faint lightest). */
|
||||
--text: #232323;
|
||||
--text-2: #444444;
|
||||
--text-muted: #6c6c6c;
|
||||
--text-dim: #858585;
|
||||
--text-faint: #9a9a9a;
|
||||
--text-muted: #5f5f5f;
|
||||
--text-dim: #666666;
|
||||
--text-faint: #6d6d6d;
|
||||
|
||||
/* Accent (warm orange, darkened for contrast on light) */
|
||||
--accent: #b25c26;
|
||||
--accent-hover: #9d4f1e;
|
||||
--accent-link: #a9551f;
|
||||
--accent-link-hover: #8f4718;
|
||||
--accent-soft: #a35e2e;
|
||||
--accent-soft: #95501f;
|
||||
--accent-muted: #8a5a2a;
|
||||
--accent-muted-2: #916433;
|
||||
--accent-wash: rgba(178, 92, 38, 0.12);
|
||||
|
||||
Reference in new issue
Block a user