Library

React Components / v9 (@fluentui/react-components)

System Info

n/a

Are you reporting Accessibility issue?

yes

Reproduction

v9 themes

Bug Description

This is the tinted badge in Teams Dark Theme.

The color tokens involved are colorBrandForeground2 (the icon + text content within the tinted badge) and colorBrandBackground2 (the background color of the tinted badge). The WCAG requirement for text is 4.5:1, but this does not meet that requirement as it is 4.2:1.

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.