[✨ Triage] dotnet/aspire#10136 by AnKushSingh05 - The color contrast ratio of the focus indicator on "Resources drop ...

[MihuBot]

Triage for microsoft/aspire#10136.
Repo filter: area-dashboard issues.
MihuBot version: 4431de.
Ping MihaZupan for any issues.

This is a test triage report generated by AI, aimed at helping the triage team quickly identify past issues/PRs that may be related.
Take any conclusions with a large grain of salt.

dotnet/aspire#10136: The color contrast ratio of the focus indicator on "Resources dropdown" with the background is 1.112:1 which is less than 3:1: A11y_Aspire Dashboard_Console_Non Text Contrast. by AnKushSingh05
[Tool] Searching for color contrast, focus indicator, dropdown contrast, WCAG1.4.11, Non Text Contrast, accessibility contrast, focus visible contrast (IncludeOpen=True, IncludeClosed=True, IncludeIssues=True, IncludePullRequests=True, Repository=dotnet/aspire)
[Tool] Found 68 issues, 156 comments, 68 returned results (17343 ms)

Here is a list of related issues and pull requests regarding color contrast, focus indicators, dropdowns, and accessibility (especially WCAG 1.4.11 Non-Text Contrast) in the Aspire Dashboard. These are highly relevant to issue #10136 ("The color contrast ratio of the focus indicator on 'Resources dropdown' with the background is 1.112:1 which is less than 3:1: A11y_Aspire Dashboard_Console_Non Text Contrast."):

---

Highly Relevant Issues and PRs

1. PR #1240 (Dec 2023) - Override fluentui-blazor error hex, darken trace duration background

• Summary: This PR addressed color contrast issues for error indicators and duration backgrounds, specifically referencing WCAG 1.4.11. The discussion includes the challenge of picking colors that meet the 3:1 contrast ratio for non-text UI elements, and the need to sometimes override default FluentUI colors. There is also discussion about subtext contrast and the complexity of ensuring contrast when backgrounds can change dynamically.
• Conclusion: The PR improved contrast for error indicators and duration bars, but also highlighted the ongoing challenge of balancing aesthetics and accessibility. The team agreed to make subtext the same color as main text for better contrast and to consult accessibility experts for further improvements.

2. Issue #355 (Oct 2023) - Color contrast issues in on /Trace page

• Summary: This issue was split from a larger accessibility issue and focused on color contrast problems in the Trace page. It led to further issues (#689 and #690) for more granular tracking.
• Conclusion: Initial fixes were made, but more complex cases were split out for further work.

3. PR #632 (Nov 2023) - Update trace colors for accessibility

• Summary: Made small modifications to text colors in traces and trace details to ensure proper contrast, impacting both light and dark modes.
• Conclusion: Partially resolved broader accessibility issues, with remaining items split into separate issues for more design discussion.

4. PR #1380 (Dec 2023) - 5 small a11y fixes

• Summary: Included fixes for subtext contrast, background color tweaks, and improved contrast in log displays. The PR also discusses the importance of using the correct color tokens and not overriding adaptive color system recipes unless necessary.
• Conclusion: All current accessibility issues caught by automated checkers were addressed, but the team noted the need for ongoing validation, especially for console log color schemes.

5. Issue #689 (Nov 2023) - Contrast issues in duration bar on /Traces

• Summary: Focused on the contrast between duration bars and backgrounds, as well as subtext contrast. The discussion includes the difficulty of meeting contrast requirements for both background and foreground, and the possibility of conveying information in alternative ways for accessibility.
• Conclusion: Temporary fixes suggested (e.g., using black/white for subtext), with agreement that additional non-visual cues may be needed.

6. Issue #690 (Nov 2023) - Error indicator on span in /Traces is hard to see in dark mode

• Summary: The error indicator's red color did not meet contrast requirements in dark mode. The discussion includes options for adjusting icon design and color to improve visibility.
• Conclusion: The team agreed to override the error color to a more accessible shade.

7. PR #1527 (Jan 2024) - Restyle error ui and reconnection ui

• Summary: Addressed contrast issues in error and reconnection UI, especially in dark mode. The discussion includes the challenge of balancing background and foreground colors for accessibility.
• Conclusion: The PR improved contrast, but some reviewers noted that further tweaks might be needed for optimal dark mode experience.

8. Issue #270 (Oct 2023) - Dashboard Accessibility Issues

• Summary: A meta-issue tracking various accessibility problems, including color contrast. The color contrast item was split off into its own issue for more focused work.

---

Other Notable Related Issues

• Issue #9107 (May 2025) - Replace existing dashboard colors with fluent alternatives: Ongoing work to align dashboard colors with Fluent UI palettes, which may impact contrast ratios.
• PR #1231 (Dec 2023) - Highlight selected rows: Changed subtext color to avoid "ghosted" appearance and improve contrast when rows are selected.
• Issue #1125 (Nov 2023) - Console logs: colorization readability: Discusses readability and contrast in console logs, with suggestions for improving badge and text color contrast.
• PR #1755 (Jan 2024) - Add data grid view of metrics: Includes discussion of icon and text contrast in data grids, with changes made to meet 3:1 contrast requirements.
• PR #2270 (Feb 2024) - Make resource details sections more obvious: Discusses the challenge of finding background colors for accordion headers that provide sufficient contrast.

---

Key Takeaways

• Contrast issues for focus indicators and dropdowns have been a recurring theme in Aspire Dashboard accessibility work, especially in relation to WCAG 1.4.11 (Non-Text Contrast).
• Multiple PRs have addressed specific color contrast problems for error indicators, duration bars, subtext, and UI backgrounds, often requiring overrides of default FluentUI colors.
• The team has acknowledged the complexity of meeting contrast requirements when UI elements have dynamic backgrounds or overlays, and has sometimes consulted accessibility experts for guidance.
• There is ongoing work to align with Fluent UI color palettes and to ensure that all interactive elements (including dropdowns) meet the 3:1 contrast ratio for non-text elements.

---

If you are triaging issue #10136, you should reference the above issues and PRs, especially #1240, #689, #690, #1380, and #632, as they contain both technical solutions and design discussions directly relevant to color contrast and focus indicators in dropdowns and other UI elements. The team has made several improvements, but the issue you are triaging suggests that there are still areas (such as the "Resources dropdown" focus indicator) that do not meet the required contrast ratio and may need further attention or a new fix.