Skip to content

[bug]: Alert destructive description text in new-york-v4 falls below WCAG AA with default theme #10431

@galoi

Description

@galoi

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

  1. Check the current main branch.
  2. Use the default theme tokens documented in apps/v4/content/docs/(root)/theming.mdx.
  3. Render a destructive Alert with a title and description using apps/v4/registry/new-york-v4/ui/alert.tsx.
  4. Inspect the description text color coming from *:data-[slot=alert-description]:text-destructive/90.
  5. Run an accessibility check such as axe / Storybook a11y / Lighthouse.
  6. 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

  • I've made research efforts and searched the documentation
  • I've searched for existing issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions