Skip to content

Notice: link/secondary action controls are low-contrast on dark theme backgrounds #80211

Open

Description

@alshakero

Description

See here: https://wordpress.github.io/gutenberg/?path=/story/components-notice--with-actions&globals=dsColorTheme:dark

Image

When a Notice from @wordpress/components is rendered under the design-system dark theme (a ThemeProvider with a dark background seed, e.g. Storybook's dark theme toolbar), its link and secondary/tertiary action controls fail the minimum color-contrast ratio and read as broken.

The notice's own surface, border, and text tokens all regenerate correctly for the dark background and remain accessible. The problem is limited to the interactive action controls: they color themselves with the legacy --wp-admin-theme-color accent, which is a fixed value (#3858e9) that does not adapt to the theme background. On the tinted, dark notice surface (#251d0d for the warning tone) this drops to roughly 2.2:1 contrast — well below the WCAG AA minimum.

Step-by-step reproduction

  1. Open Storybook and navigate to Components → Feedback → Notice.
  2. Select a story that renders actions (a primary button, a secondary button, and a link) — e.g. the warning notice with actions.
  3. Switch the Design System theme toolbar to Dark.

Expected

The secondary button and the link remain legible against the dark notice surface (as the @wordpress/ui Button achieves by using the theme-aware --wpds-color-foreground-interactive-brand token for its outline/minimal variants).

Actual

The "Or click me instead!" (secondary) button and the "Or visit a link for more info" link render in a dark #3858e9 blue that barely separates from the dark surface (~2.2:1). The primary button and the notice's text/border are fine.

Observed with the warning tone, but this affects every tone (info, success, warning, error) because the accent is tone-independent.

Environment

  • WordPress/Gutenberg trunk
  • @wordpress/components Notice rendered inside a dark @wordpress/theme ThemeProvider

Activity

  1. added
    [Type] BugAn existing feature does not function as intended
    [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).
    on Jul 14, 2026
  2. ciampo commented on Jul 14, 2026

    @ciampo
    Contributor

    @alshakero would you be able to add a screenshot ? It's always a welcome addition for UI-related issues/PRs

  3. alshakero commented on Jul 14, 2026

    @alshakero
    ContributorAuthor

    @ciampo added a link and a screenshot!

  4. ciampo commented on Jul 14, 2026

    @ciampo
    Contributor

    I confirm that this is caused by the fact that Button in @wordpress/components doesn't use WPDS tokens yet.

    #79993 and/or #79994 should fix this 👌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] Component SystemWordPress component system[Feature] UI ComponentsImpacts or related to the UI component system[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions