[Bug]: Text Color Does Not Adapt to Background Color in HeatMapChart

[Yogitha-Lakshmi-525]

Charting Control

HeatMapChart

Package version

5.21.25

React version

17.0.2

Environment

- Fluent UI React version: @fluentui/react-charting v5.21.25
- React version: 17.0.2
- Browser: Chrome, Edge 
- Operating System: Windows 11

Current Behavior

I am encountering an issue in the HeatMapChart component of the Fluent UI React library. When the background color of the heatmap cells is either too dark or too light, the text color does not adapt accordingly, resulting in poor contrast and reduced readability.

The text color does not change based on the background color, making it inaccessible in many scenarios.

Expected Behavior

The text color should dynamically adjust based on the cell's background color to ensure sufficient contrast and readability. For instance:

Use dark text for lighter backgrounds.
Use light text for darker backgrounds.

Add a prop to adjust text color based on background luminance for better readability.

Reproduction

https://codesandbox.io/p/sandbox/frosty-violet-f4m3kz?file=%2Fsrc%2FApp.js%3A12%2C52

Steps to reproduce

Use the HeatMapChart component with a dataset where cell background colors include both light and dark shades.
Render the chart and observe the text inside the heatmap cells.
Notice that the text color remains constant regardless of the background color, leading to poor contrast.

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

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.