microsoft / microsoft/fluentui

[HorizontalBarChart-Multi Stacked-MultiStackedBarChart N/M]: Luminosity contrast ratio of number '0.5' displayed in the tooltip for 'Vehicle registration numbers' bar series within 'Monitored' bar chart is 2.126:1 which is less than 3:1

Open
#31,079 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Package: charting Resolution: Soft Close
Dominant language
TypeScript
Stars
20.3k
Forks
2.9k
Avg merge
2d 9h
Merged PRs (30d)
46

Description

Test Environment:
OS Build: Windows 11
Version: 24H2 (OS Build 26058.1400)
Browser: Edge-Dev
URL: Fluent UI - Controls - React - HorizontalBarChart - Multi Stacked (microsoft.com)
Browser Version: 123.0.2420.10 (Official build) dev (64-bit)
Tool: Accessibility insights for windows (Color contrast analyzer)

Pre-requisites:
Navigate using keyboard only.
Run AI tool.
Repro Steps:
Open the above-mentioned URL in edge-dev browser.
'HorizontalBarChart' page opens.
Navigate to 'MultiStackedBarChart N/M' bar chart using tab key.
Navigate to the 'Vehicle registration numbers' bar series in the 'Monitored' bar chart using arrow key.
Verify the issue with Accessibility insights for windows tool.
Actual Result:
The color contrast ratio for the number '0.5' displayed in the tooltip for the 'Vehicle registration numbers' bar series within the 'Monitored' bar chart is 2.126:1 which is less than the minimum required ratio of 3:1.

Also, the color used for the 'Vehicle Registration Numbers' bar series has a contrast ratio of 2.126:1.

Expected Result:
The luminosity contrast ratio for the number '0.5' in the tooltip and the color of the 'Vehicle Registration Numbers' bar series with respect to its background should be greater than or equal to 3:1

Note:
Same issue reproduces for the color used for bar series and tooltip information on tooltip when the contrast ratio is less than 3:1 throughout application.
Same issue reproduces for bar charts on Fluent UI - Controls - React - HorizontalBarChart - Stacked (microsoft.com)

User Impact:
The current lack of contrast may pose difficulties for users with visual impairments, particularly those with low vision or color blindness, in distinguishing and interpreting the information presented in the tooltip and the bar series.

Image

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the HorizontalBarChart Multi Stacked and Stacked demos linked in the issue, reproduce the tooltip and bar-series contrast with Accessibility Insights, and trace the shared chart styling. Done means the affected tooltip number and bar-series colors meet a contrast ratio of at least 3:1 in these charts and other affected bar charts.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.