[Auto-QA] Color contrast risks detected — WCAG AA compliance

[clubanderson]

Auto-QA [Accessibility]: Color Contrast

Detected: 2026-06-27T02:10:07.298Z | Focus: Accessibility | Commit: f1740da | Run: View

Findings

### Light gray text classes (20 found) — may fail WCAG AA on white/light backgrounds
Gray-200/300 text on light backgrounds often falls below the 4.5:1 contrast ratio:

src/components/landing/InstallStepCard.tsx:45:

src/components/landing/TabbedDeploySection.tsx:89:                : 'bg-slate-800/30 text-slate-400 hover:text-slate-300 hover:bg-slate-800/50'

src/components/landing/TabbedDeploySection.tsx:101:                : 'bg-slate-800/30 text-slate-400 hover:text-slate-300 hover:bg-slate-800/50'

src/components/landing/TabbedDeploySection.tsx:113:                : 'bg-slate-800/30 text-slate-400 hover:text-slate-300 hover:bg-slate-800/50'

src/components/compliance/SBOMDashboard.tsx:487:                  {v.fixed_version}

src/components/compliance/SBOMDashboard.tsx:491:                      {v.status}

src/components/compliance/ThreatIntelDashboard.tsx:146:      Loading threat intelligence…

src/components/compliance/ThreatIntelDashboard.tsx:237:                      {iocType.type}

src/components/compliance/ThreatIntelDashboard.tsx:287:                  {feed.provider}

src/components/compliance/ThreatIntelDashboard.tsx:288:                  {feed.category}

src/components/compliance/ThreatIntelDashboard.tsx:298:                  {new Date(feed.last_updated).toLocaleString()}

src/components/compliance/ThreatIntelDashboard.tsx:325:                  {ioc.ioc_type}

src/components/compliance/ThreatIntelDashboard.tsx:327:                  {ioc.feed_name}

src/components/compliance/ThreatIntelDashboard.tsx:336:                      {(ioc.status ?? '').replace('_', ' ')}

src/components/compliance/ThreatIntelDashboard.tsx:340:                  {ioc.cluster}

src/components/compliance/ThreatIntelDashboard.tsx:341:                  {new Date(ioc.detected_at).toLocaleString()}

src/components/compliance/SLSADashboard.tsx:241:      Loading SLSA data…

src/components/compliance/SLSADashboard.tsx:331:              Pass: {summary.source_integrity_pass}

src/components/compliance/SLSADashboard.tsx:335:              Fail: {summary.source_integrity_fail}

src/components/compliance/SLSADashboard.tsx:339:              Reproducible: {summary.reproducible_builds}/{summary.total_builds}


### Inline color styles (15 found) — contrast not validated by design system
Use Tailwind classes or CSS variables so contrast can be centrally verified:

src/components/cards/insights/ResourceImbalanceDetector.tsx:105:            label: { formatter: Avg ${avgValue}%, position: 'start', color: '#fbbf24', fontSize: CHART_AXIS_FONT_SIZE },

src/components/cards/insights/ResourceImbalanceDetector.tsx:106:            lineStyle: { color: '#fbbf24', type: 'dashed' },

src/components/cards/KubeMan.tsx:131:    { pos: { x: 9, y: 9 }, dir: 'up', color: '#ff0000', scared: false, home: true, name: 'Blinky', releaseDelay: 0 },

src/components/cards/KubeMan.tsx:132:    { pos: { x: 8, y: 9 }, dir: 'up', color: '#ffb8ff', scared: false, home: true, name: 'Pinky', releaseDelay: 30 },

src/components/cards/KubeMan.tsx:133:    { pos: { x: 10, y: 9 }, dir: 'up', color: '#00ffff', scared: false, home: true, name: 'Inky', releaseDelay: 60 },

src/components/cards/KubeMan.tsx:134:    { pos: { x: 9, y: 10 }, dir: 'up', color: '#ffb852', scared: false, home: true, name: 'Clyde', releaseDelay: 90 },

src/components/cards/KubeMan.tsx:577:      { pos: { x: 9, y: 9 }, dir: 'up', color: '#ff0000', scared: false, home: true, name: 'Blinky', releaseDelay: 0 },

src/components/cards/KubeMan.tsx:578:      { pos: { x: 8, y: 9 }, dir: 'up', color: '#ffb8ff', scared: false, home: true, name: 'Pinky', releaseDelay: 100 },

src/components/cards/KubeMan.tsx:579:      { pos: { x: 10, y: 9 }, dir: 'up', color: '#00ffff', scared: false, home: true, name: 'Inky', releaseDelay: 200 },

src/components/cards/KubeMan.tsx:580:      { pos: { x: 9, y: 10 }, dir: 'up', color: '#ffb852', scared: false, home: true, name: 'Clyde', releaseDelay: 300 },

src/components/cards/llmd/LatencyBreakdown.tsx:156:        nameTextStyle: { color: '#a1a1aa', fontSize: CHART_AXIS_FONT_SIZE },

src/components/cards/llmd/LatencyBreakdown.tsx:157:        axisLabel: { color: '#a1a1aa', fontSize: CHART_AXIS_FONT_SIZE },

src/components/cards/llmd/LatencyBreakdown.tsx:158:        axisLine: { lineStyle: { color: '#a1a1aa' } },

src/components/cards/llmd/LatencyBreakdown.tsx:166:        nameTextStyle: { color: '#a1a1aa', fontSize: CHART_AXIS_FONT_SIZE },

src/components/cards/llmd/LatencyBreakdown.tsx:167:        axisLabel: { color: '#a1a1aa', fontSize: CHART_AXIS_FONT_SIZE },

Suggested Improvements

Ensure text color / background combinations meet WCAG AA 4.5:1 ratio
Replace text-gray-200/300 on light backgrounds with text-gray-600 or darker
Avoid opacity-reduced text below 60% — it drops effective contrast sharply
Use inline color styles only when paired with a verified-contrast background
Validate with the WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/


PR Guidance: Keep PRs small and focused. Smaller PRs have higher acceptance rates.


This issue was automatically created by the Auto-QA workflow during Accessibility focus day.

[github-actions]

🐝 Hi @clubanderson! I'm kubestellar-hive[bot], an automation bot for this repo.

Trusted users — org members and contributors with write access — can mention @kubestellar-hive in a comment to trigger repo automation.
On issues, that mention queues an automated fix attempt. On pull requests, it records extra context for existing automation.
This is not an interactive Q&A bot, so mentions should be treated as requests for automation rather than a conversation.

Automation may take a moment to start, and follow-up happens through workflow activity rather than chat replies.