psa-systems/mokosh-apps
Watch
9
0
Fork
You've already forked mokosh-apps
 0
Code Issues Pull requests 1 Projects Releases 14 Packages Wiki Activity Actions

feat(theme): surface contrast ratio on accent hover (MAPPS-288) #305

Merged
YousifShkara merged 1 commit from feat/MAPPS-288-wcag-contrast-guard into main 2026-06-21 10:31:27 +02:00
Conversation 0 Commits 1 Files changed 1 +22 -3
YousifShkara commented 2026-06-21 09:28:24 +02:00
Owner
Copy link

The theme picker already disabled accent dots whose on_accent-on-fill contrast fell below WCAG AA (passes_aa(...)), but the only signal a user got was the dimmed visual state and the section's "Dimmed = low contrast on this base" caption - they couldn't see what the ratio actually was or what threshold it needed to clear. Compute the ratio for every accent button and surface it on the tooltip + aria-label: Red - locked: contrast 3.2:1 (needs 4.5:1 for WCAG AA) when failing, Red (contrast 5.1:1) when passing. The disable still prevents picking a failing combination; this adds the user-visible "what / why" the AC asks for.

The dimmed-mode label moves from "low contrast on this base" to "below WCAG AA on this base" so the rule (not just the vibe) is named in the UI.

#MAPPS-288

The theme picker already disabled accent dots whose `on_accent`-on-`fill` contrast fell below WCAG AA (`passes_aa(...)`), but the only signal a user got was the dimmed visual state and the section's "Dimmed = low contrast on this base" caption - they couldn't see what the ratio actually was or what threshold it needed to clear. Compute the ratio for every accent button and surface it on the tooltip + aria-label: `Red - locked: contrast 3.2:1 (needs 4.5:1 for WCAG AA)` when failing, `Red (contrast 5.1:1)` when passing. The disable still prevents picking a failing combination; this adds the user-visible "what / why" the AC asks for. The dimmed-mode label moves from "low contrast on this base" to "below WCAG AA on this base" so the rule (not just the vibe) is named in the UI. #MAPPS-288
feat(theme): surface contrast ratio on accent hover (MAPPS-288)
All checks were successful
Check / clippy + fmt + tests (pull_request) Successful in 4m6s
Details
Create release / Create release from merged PR (pull_request) Has been skipped
Details
542a2b3c23 
The theme picker already disabled accent dots whose `on_accent`-on-`fill` contrast fell below WCAG AA (`passes_aa(...)`), but the only signal a user got was the dimmed visual state and the section's "Dimmed = low contrast on this base" caption - they couldn't see what the ratio actually was or what threshold it needed to clear. Compute the ratio for every accent button and surface it on the tooltip + aria-label: `Red - locked: contrast 3.2:1 (needs 4.5:1 for WCAG AA)` when failing, `Red (contrast 5.1:1)` when passing. The disable still prevents picking a failing combination; this adds the user-visible "what / why" the AC asks for.

The dimmed-mode label moves from "low contrast on this base" to "below WCAG AA on this base" so the rule (not just the vibe) is named in the UI.

#MAPPS-288
YousifShkara deleted branch feat/MAPPS-288-wcag-contrast-guard 2026-06-21 10:31:27 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
YousifShkara
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
psa-systems/mokosh-apps!305
No description provided.