crashappsec / crashappsec/react-registry
alert: icon colours fail WCAG 1.4.11 on the dark card (1.74:1)
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
The alert component's three icon colours use the raw chart/destructive tokens:
info: [&>svg]:text-chart-1
warning: [&>svg]:text-chart-3
error: [&>svg]:text-destructive
Measured by rasterising the rendered pixels (not by comparing computed colour strings, which is vacuous when oklch and rgb notations describe the same colour): text-chart-1 on the dark card surface is **1.74:1**. WCAG 2.1 SC 1.4.11 requires 3:1 for graphical objects, and an alert icon is the component's only graphic.
The plot colours are correct for chart fills — they are just not readable as foreground on a card. A variant-prefixed utility like `[&>svg]:text-chart-1` also generates its own class, so a theme-level text override cannot reach it.
crashappsec/compass carries a local divergence for exactly these three lines (icon colours point at readable accent tokens; borders and fills keep the brand token), declared in a guard that otherwise pins the component byte-for-byte to this registry. Happy to send the fix upstream if the approach looks right — a readable foreground token per chart hue would let consumers drop the divergence.
Contributor guide
Research direction
Start by locating the alert component and the theme tokens used by its info, warning, and error icons. Check how the component’s variant-prefixed SVG text utilities are generated and how the proposed readable foreground tokens relate to the chart colors. Done means each icon reaches at least 3:1 contrast against the dark card while chart fills and borders retain their brand tokens.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 72/100