MessageViewButton: Critical state fails WCAG 1.4.3 contrast (3.36:1, requires 4.5:1) #9092

Describe the bug

The MessageViewButton component rendered with type={ValueState.Critical} (orange state) fails WCAG 1.4.3 Minimum Contrast (Level AA).

Background: --sapButton_Critical_Background → #e76500 (rgb(231, 101, 0))
Text color: --sapButton_Critical_TextColor → #ffffff
Measured contrast ratio: 3.36:1
Required ratio: 4.5:1 (normal text, 14px / 400 weight)
The counter number rendered inside the button (e.g. 5) is displayed as white text on this orange background, producing a contrast ratio of 3.36:1 which fails the WCAG 2.1 AA threshold of 4.5:1 for normal-sized text.

This was validated and confirmed in the Storybook at https://ui5.github.io/webcomponents-react/v2/?path=/story/user-feedback-messageview--with-message-view-button.

Isolated Example

No response

Reproduction steps

• Render a MessageViewButton with type={ValueState.Critical} and a non-zero counter prop
• Inspect the rendered ui5-button host element's computed background color → rgb(231, 101, 0)
• Inspect the counter text color → rgb(255, 255, 255)
• Calculate contrast ratio: (1.05) / (0.2631 + 0.05) = 3.36:1 — fails WCAG 1.4.3

Expected Behaviour

The text color on the Critical-state button should achieve at least 4.5:1 contrast against the orange background, or the background color should be darkened to meet the threshold. Either --sapButton_Critical_Background or --sapButton_Critical_TextColor (or both) must be adjusted.

Screenshots or Videos

No response

UI5 Web Components for React Version

2.27.2

UI5 Web Components Version

2.27.2

Browser

Chrome

Operating System

No response

Additional Context

The colors are sourced from SAP Fiori design tokens in @sap-theming/theming-base-content, specifically in content/Base/baseLib/sap_horizon/css_variables.css:

--sapButton_Critical_Background: #e76500;
--sapButton_Critical_TextColor: #fff;
This may need to be cascaded as a bug report to SAP/theming-base-content, as the non-conformant contrast pair originates there. MessageViewButton.module.css correctly uses these tokens via var(--sapButton_Critical_Background) / var(--sapButton_Critical_TextColor) — no hardcoded colors in @ui5/webcomponents-react.

Relevant log output

Organization

SF

Declaration

• I’m not disclosing any internal or sensitive information.