crashappsec / crashappsec/react-registry

alert: icon colours fail WCAG 1.4.11 on the dark card (1.74:1)

Open Beginner friendly
#13 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.