Grid.tsx's selected-card border does not clear the 3:1 non-text contrast floor, and it is the only thing marking the selected state along with the fill.
Grid.tsx, the GridItem motion wrapper:
className={clsx(
"w-full h-full rounded-sm backdrop-blur-xs border cursor-pointer shadow-sm shadow-zinc-950/50 hover:shadow-none duration-200",
selected ? "bg-vsd/50 border-vsl/25" : "bg-zinc-950/50 border-zinc-400/5",
...
)}Selected state: border-vsl/25 (25% alpha) next to a bg-vsd/50 fill, no other visual cue. On the worst-case backdrop text-contrast.test.ts already uses for everything else in this file, this reads about 1.53:1, up from about 1.34:1 before PR #251 lightened --color-vsl. Both numbers are well under the 3:1 WCAG 1.4.11 floor for a UI component boundary that is the sole indicator of a state.
Raised during review of PR #251 (#251 (review)): "The Grid selected card border reads 1.53:1 worst case at 25 percent alpha over bg-vsd/50, up from 1.34, and the test declines to assert on it. I agree with not asserting and the comment explaining why is honest, but the selected state there is carried by fill and border colour with nothing else, so it is a 1.4.11 gap that predates you and deserves its own issue rather than a comment in a test."
Not caused by #251 and not fixed there; tests/text-contrast.test.ts pins that the border still tracks --color-vsl but intentionally asserts no ratio for it, with a comment explaining why (the border sits at partial alpha next to its own fill color, so a single-token contrast check would not be meaningful without also accounting for the fill).
A fix needs a cue beyond border-and-fill alpha for the selected state: a thicker or fully opaque border, an icon or checkmark, or a different non-alpha color for the fill/border pair. Whichever direction, it should go through the same worst-case compositing text-contrast.test.ts already uses for every other element in this file.
Grid.tsx's selected-card border does not clear the 3:1 non-text contrast floor, and it is the only thing marking the selected state along with the fill.Grid.tsx, theGridItemmotion wrapper:Selected state:
border-vsl/25(25% alpha) next to abg-vsd/50fill, no other visual cue. On the worst-case backdroptext-contrast.test.tsalready uses for everything else in this file, this reads about 1.53:1, up from about 1.34:1 before PR #251 lightened--color-vsl. Both numbers are well under the 3:1 WCAG 1.4.11 floor for a UI component boundary that is the sole indicator of a state.Raised during review of PR #251 (#251 (review)): "The Grid selected card border reads 1.53:1 worst case at 25 percent alpha over
bg-vsd/50, up from 1.34, and the test declines to assert on it. I agree with not asserting and the comment explaining why is honest, but the selected state there is carried by fill and border colour with nothing else, so it is a 1.4.11 gap that predates you and deserves its own issue rather than a comment in a test."Not caused by #251 and not fixed there;
tests/text-contrast.test.tspins that the border still tracks--color-vslbut intentionally asserts no ratio for it, with a comment explaining why (the border sits at partial alpha next to its own fill color, so a single-token contrast check would not be meaningful without also accounting for the fill).A fix needs a cue beyond border-and-fill alpha for the selected state: a thicker or fully opaque border, an icon or checkmark, or a different non-alpha color for the fill/border pair. Whichever direction, it should go through the same worst-case compositing
text-contrast.test.tsalready uses for every other element in this file.