fix(a11y): accent.onFill token — white-text-on-accent-fill meets AA (12.17)#83
Merged
Conversation
…12.17) The inverse of 12.16's accent-as-text fix: white `accent.text` ON the light accent FILL (membership badges, highlight tiles) measured ~3.6–3.9:1 (under AA 4.5:1) in default-light / solar / mint — 12.16 tracked it as the one known- deferred pair. This closes it. - **New `color.accent.onFill` token** in all 12 themes: the accent FILL that carries `accent.text`. = each theme's `accent.strong` in the 3 failing light themes (white on strong clears 4.5: 4.92/5.18/5.47) and = `accent.default` elsewhere — a global default→strong swap can't work (breaks nord/aurora's dark `accent.text` on the darker strong), which is why it's per-theme. In the 9 non-failing themes onFill == default, so no visual change there; only the 3 light badges get the theme's darker accent. (+ CANONICAL_TOKEN_NAMES mirror.) - **9 accent-fill-with-text sites** repointed `background` → `--color-accent-on-fill` (membership badges, entity-fallback action, welcome tiles, filled icon-button hover, notif badge); gloss button faces, gradients, decorative dots, and accent-subtle tints correctly left alone. - **Ratchet**: the `accent-text-on-accent` pair now tests `accent.text` on `accent.onFill` (the fill that actually carries the text); KNOWN_DEFERRED removed — the theme-contrast ratchet is now GREEN with **zero deferrals** across all 12 themes. 526 tokens/sdk-types tests + the 12-theme ratchet green; tsc + lint (incl. the phantom-CSS-token checker) clean. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes the one known-deferred contrast pair from #82 (12.16): white
accent.textON the light accent FILL (membership badges, highlight tiles) measured ~3.6–3.9:1 in default-light / solar / mint. The theme-contrast ratchet is now green with zero deferrals across all 12 themes.The fix
A dedicated
color.accent.onFilltoken — the accent FILL that carriesaccent.text:accent.strongin the 3 failing light themes (white on strong clears AA: 4.92 / 5.18 / 5.47), =accent.defaulteverywhere else. Per-theme by necessity — a globalaccent.default→strongswap breaks nord/aurora (their darkaccent.texton the darker strong). In the 9 non-failing themesonFill == default, so no visual change there; only the 3 light badges get the theme's darker accent.background→--color-accent-on-fill(membership badges, entity-fallback action, welcome tiles, filled icon-button hover, notif badge). Gloss button faces, gradients, decorative dots, andaccent-subtletints correctly left alone.accent-text-on-accentpair now testsaccent.textonaccent.onFill(the fill that actually carries the text);KNOWN_DEFERREDremoved.Pairs with #82 to complete the accent a11y story:
accent.onSurface(accent as text) +accent.onFill(text on accent fill), both AA-enforced.Verified
526 tokens/sdk-types tests + the 12-theme ratchet green (zero deferrals); tsc + lint (incl. the phantom-CSS-token checker) clean; full suite green (the one flaky
beforeEachtimeout passes 12/12 in isolation).🤖 Generated with Claude Code