Describe the bug
The new-york-v4 Alert sets the destructive description text to text-destructive/90.
With the default theme tokens documented in the repo, that pushes the description text very close to or below the WCAG AA threshold for normal text on a white card background.
In particular:
apps/v4/registry/new-york-v4/ui/alert.tsx uses *:data-[slot=alert-description]:text-destructive/90
apps/v4/content/docs/(root)/theming.mdx documents the default token --destructive: oklch(0.577 0.245 27.325) and --card: oklch(1 0 0)
Using those defaults, the destructive text is roughly:
text-destructive: #e7000b, contrast vs white about 4.765:1
text-destructive/90: #ea1a23, contrast vs white about 4.516:1
In downstream accessibility checks this can show up as a failure around 4.49:1, so the current template is effectively on the threshold and can fail for normal-size body text.
This appears to come from the shipped new-york-v4 Alert template itself rather than from downstream customization.
Affected component/components
Alert (new-york-v4)
How to reproduce
- Check the current
main branch.
- Use the default theme tokens documented in
apps/v4/content/docs/(root)/theming.mdx.
- Render a destructive Alert with a title and description using
apps/v4/registry/new-york-v4/ui/alert.tsx.
- Inspect the description text color coming from
*:data-[slot=alert-description]:text-destructive/90.
- Run an accessibility check such as axe / Storybook a11y / Lighthouse.
- The description text can fail color contrast for normal body text on the default white card background.
Codesandbox/StackBlitz link
Not prepared yet. The issue is reproducible from the current main branch using the shipped apps/v4/registry/new-york-v4/ui/alert.tsx together with the default theme tokens documented in the repo.
Logs
Example a11y output from a downstream reproduction:
Element has insufficient color contrast of 4.49 (foreground color: #ea1a23, background color: #ffffff, font size: 14px, font weight: normal). Expected contrast ratio of 4.5:1.
System Info
Observed in a local downstream reproduction on macOS with Chrome and Storybook a11y.
The underlying issue appears to be template/token based because it comes from the current `main` `new-york-v4` Alert classes plus the documented default theme values.
Before submitting
Describe the bug
The
new-york-v4Alert sets the destructive description text totext-destructive/90.With the default theme tokens documented in the repo, that pushes the description text very close to or below the WCAG AA threshold for normal text on a white card background.
In particular:
apps/v4/registry/new-york-v4/ui/alert.tsxuses*:data-[slot=alert-description]:text-destructive/90apps/v4/content/docs/(root)/theming.mdxdocuments the default token--destructive: oklch(0.577 0.245 27.325)and--card: oklch(1 0 0)Using those defaults, the destructive text is roughly:
text-destructive:#e7000b, contrast vs white about4.765:1text-destructive/90:#ea1a23, contrast vs white about4.516:1In downstream accessibility checks this can show up as a failure around
4.49:1, so the current template is effectively on the threshold and can fail for normal-size body text.This appears to come from the shipped
new-york-v4Alert template itself rather than from downstream customization.Affected component/components
Alert (
new-york-v4)How to reproduce
mainbranch.apps/v4/content/docs/(root)/theming.mdx.apps/v4/registry/new-york-v4/ui/alert.tsx.*:data-[slot=alert-description]:text-destructive/90.Codesandbox/StackBlitz link
Not prepared yet. The issue is reproducible from the current
mainbranch using the shippedapps/v4/registry/new-york-v4/ui/alert.tsxtogether with the default theme tokens documented in the repo.Logs
Example a11y output from a downstream reproduction: Element has insufficient color contrast of 4.49 (foreground color: #ea1a23, background color: #ffffff, font size: 14px, font weight: normal). Expected contrast ratio of 4.5:1.System Info
Before submitting