unified-search label text renders at 4.22:1 in light mode — --lasuite-content-muted is only ever defined in dark-mode blocks

[rubenvdlinde]

What

The unified-search label text in css/systems/lasuite/element-overrides.css renders at ~4.22:1 in light mode, below the WCAG 2.2 AA threshold of 4.5:1 for normal text (SC 1.4.3). Two rules are affected:

rule	server	introduced
#header .unified-search-input__label	NC 34	pre-existing
#header .unified-search-menu .header-menu__trigger::after	NC 32	PR #260

Both are font-size: 14px; font-weight: 500 — normal text, not large text, so 4.5:1 applies rather than 3:1.

The mechanism: --lasuite-content-muted is never defined in light mode

Both rules read color: var(--lasuite-content-muted, var(--lasuite-color-gray-500)).

--lasuite-content-muted is defined in exactly two places, element-overrides.css:803 and :817 — and both are dark-mode blocks (@media (prefers-color-scheme: dark) and body[data-theme-dark]). There is no light-mode definition anywhere in css/.

So in light mode the token is undefined and the fallback renders: gray-500 on a gray-025 surface.

Measured on both emitted ramps (defaults.css and brand-override.css):

fg	bg	ratio	AA text 4.5:1	non-text 3:1
gray-500 #74777c	gray-025 #f7f8f8	4.22:1	FAIL	pass
gray-500 #75758a	gray-025 #f8f8f9	4.24:1	FAIL	pass

Dark mode is fine — the token resolves to gray-200 over gray-900 at 10.1:1.

Why it passes the 3:1 bar and that is the trap

The same token/fallback pair is also used for the magnifier icon (:224), where the applicable rule is SC 1.4.11 non-text contrast at 3:1 — which 4.22:1 clears comfortably. The value is correct for the icon and was then reused for text, where the requirement is higher. The two rules look identical and have different pass marks.

Why no gate catches it

• gate-33 axe-core is NOT APPLICABLE in this repo — enable-axe is not set, so runtime accessibility is unverified rather than clean.
• Even with axe enabled, color-contrast does not evaluate ::after generated content, so the NC 32 rule would stay invisible.

Scope

css/systems/lasuite/element-overrides.css is loaded by two design systems — lasuite and cunningham (design-systems.json) — so any fix lands on both.

Suggested direction, not a decision

Defining --lasuite-content-muted for light mode is the structural fix, but it also repoints the magnifier icon, whose current rendering was deliberately measured byte-identical to stock NC 34. Picking the replacement step is a token decision rather than a bug fix, so it is left open here. gray-550 and gray-600 both clear 4.5:1 on gray-025 if a text-only override is preferred.