Repository navigation
Notice: link/secondary action controls are low-contrast on dark theme backgrounds #80211
Description
Description
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
- Open Storybook and navigate to Components → Feedback → Notice.
- Select a story that renders actions (a primary button, a secondary button, and a link) — e.g. the warning notice with actions.
- 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/componentsNoticerendered inside a dark@wordpress/themeThemeProvider
Activity
ciampo commentedon Jul 14, 2026
@alshakero would you be able to add a screenshot ? It's always a welcome addition for UI-related issues/PRs
alshakero commentedon Jul 14, 2026
@ciampo added a link and a screenshot!
ciampo commentedon Jul 14, 2026
I confirm that this is caused by the fact that
Buttonin@wordpress/componentsdoesn't use WPDS tokens yet.#79993 and/or #79994 should fix this 👌