Poor contrast: light green with white text is unreadable on alarm-panel card

[ganndolvain]

Description

The green color tokens in the dark theme (Graphite) produce very poor contrast when used with white text. This is most noticeable on the alarm-panel card's "Armed Home" / "Armed Away" buttons, but likely affects other components that use green backgrounds with white text.

Current values

token-rgb-green: 141, 253, 166
token-rgb-light-green: 156, 255, 166
token-color-feedback-success: rgb(118, 214, 152)

These are very light/pastel greens that work well as accent colors on dark backgrounds, but fail WCAG contrast requirements when used as a background behind white text.

Workaround

Overriding the green tokens with darker values restores readability:

token-rgb-green: 56, 180, 96
token-rgb-light-green: 76, 200, 116
token-color-feedback-success: rgb(56, 180, 96)
token-color-background-label-badge-green: rgb(46, 150, 80)
rgb-success-color: 56, 180, 96

Steps to reproduce

1. Apply the Graphite (dark) theme
2. Add an alarm-panel card to a dashboard
3. Arm the alarm (e.g., "Arm Home")
4. The armed state button has a light green background with white text — nearly unreadable

Expected behavior

Green background colors should have sufficient contrast with white text (WCAG AA minimum 4.5:1 ratio).

Screenshots

Not included, but easily reproducible with any alarm-panel card.

Environment

• Home Assistant 2026.3.1
• Graphite theme (dark variant)

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[github-actions]

This issue was closed because it has been inactive for 14 days since being marked as stale.