✨ [scanner] fix: improve chart axis color contrast for WCAG AA compliance#19344
Conversation
…ance - LatencyBreakdown.tsx: change axis color from #71717a (3.8:1) to #a1a1aa (5.2:1) - ResourceImbalanceDetector.tsx: change markLine color from #f59e0b to #fbbf24 for better contrast Signed-off-by: KubeStellar Scanner <scanner@kubestellar.io>
kubestellar-prow
Bot
added
the
dco-signoff: yes
✅ Deploy Preview for kubestellarconsole ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
|
👋 Hey @clubanderson — thanks for opening this PR!
This is an automated message. |
|
🐝 Hi @clubanderson! I'm Trusted users — org members and contributors with write access — can mention Automation may take a moment to start, and follow-up happens through workflow activity rather than chat replies. |
kubestellar-prow
Bot
added
the
size/S
✅ Test Coverage CheckAll new source files in this PR have corresponding test files. Checked |
Auto Test GeneratorThe following new files have no corresponding test file:
Please add tests or apply the |
There was a problem hiding this comment.
Pull request overview
Updates chart styling in the scanner-related UI to improve visibility/contrast on dark backgrounds and move toward WCAG AA compliance for chart annotations.
Changes:
- Adjusted ECharts axis label/name/line colors in
LatencyBreakdownfrom#71717ato a lighter gray for improved contrast. - Tweaked
ResourceImbalanceDetector’s average markLine label + stroke color from#f59e0bto#fbbf24to improve visibility. - Note: build/lint are validated by CI on the PR for this repository.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| web/src/components/cards/llmd/LatencyBreakdown.tsx | Lightens axis text/line color to improve contrast on dark chart backgrounds. |
| web/src/components/cards/insights/ResourceImbalanceDetector.tsx | Adjusts average guide line styling color for better visibility. |
| nameTextStyle: { color: '#a1a1aa', fontSize: CHART_AXIS_FONT_SIZE }, | ||
| axisLabel: { color: '#a1a1aa', fontSize: CHART_AXIS_FONT_SIZE }, | ||
| axisLine: { lineStyle: { color: '#a1a1aa' } }, |
|
CI Analysis: The "Accessibility Tests" and "Test (chromium, shard 4)" failures are NOT caused by this PR's color changes:
These failures are pre-existing/flaky tests unrelated to this PR. Retrying CI should resolve them. |
|
Thank you for your contribution! Your PR has been merged. Check out what's new:
Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey |
✅ Post-Merge Verification: passedCommit: |
|
Post-merge build verification passed ✅ Both Go and frontend builds compiled successfully against merge commit |
Fixes #19341
Improves chart axis color contrast to meet WCAG AA compliance (4.5:1 ratio minimum):
#71717a(zinc-500, ~3.8:1 contrast ratio on dark bg) to#a1a1aa(zinc-400, ~5.2:1 ratio) — now WCAG AA compliant#f59e0b(amber-500) to#fbbf24(amber-400) for improved visibility against dark chart backgroundsAnalysis of other findings
Most reported items are false positives on dark theme:
text-slate-400on dark backgrounds in landing/compliance components already meets 4.5:1Only the chart axis colors (
#71717a) were genuinely below the WCAG AA threshold on the app's dark background.