From f6f33fa480ef85ce90aec9e812d5209714f783eb Mon Sep 17 00:00:00 2001
From: christin <46345125+chrifro@users.noreply.github.com>
Date: Fri, 13 Mar 2026 10:20:27 +0100
Subject: [PATCH] fix: adjust highlight colors to pass WCAG AA contrast ratio
 (#22823)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes ENG-2052

Updates 4 CSS custom properties in `site/src/index.css` that failed the
4.5:1 WCAG AA contrast requirement against their paired surfaces:

**Light theme:**
| Variable | Before | After | Contrast |
|---|---|---|---|
| `--highlight-orange` | `30 100% 54%` | `30 100% 32%` | 2.07 → 4.89 |
| `--highlight-grey` | `240 5% 65%` | `240 5% 45%` | 2.55 → 5.11 |
| `--highlight-magenta` | `295 68% 46%` | `295 68% 40%` | 4.33 → 5.40 |

**Dark theme:**
| Variable | Before | After | Contrast |
|---|---|---|---|
| `--highlight-grey` | `240 4% 46%` | `240 4% 53%` | 3.65 → 4.68 |

Only lightness values were changed; hue and saturation are preserved.

## Storybook stories to review

Chromatic will run automatically on this PR and generate visual diffs.
Key stories affected:

- **Badge** — `site/src/components/Badge/Badge.stories.tsx` (uses
`text-highlight-magenta`, `text-highlight-red`, `text-highlight-green`,
`text-highlight-purple`, `text-highlight-sky`)
- **StatusIndicator** —
`site/src/components/StatusIndicator/StatusIndicator.stories.tsx` (uses
`text-highlight-grey`, `bg-highlight-grey`)
- **InfoTooltip** —
`site/src/components/InfoTooltip/InfoTooltip.stories.tsx` (uses
`text-highlight-grey`)
- **FeatureStageBadge** —
`site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx`
(uses `text-highlight-sky`)
- **Chart** — `site/src/components/Chart/Chart.stories.tsx`,
`ActiveUserChart`, `LicenseSeatConsumptionChart`, `UserEngagementChart`
(uses `highlight-purple`)
- **ManagedAgentsConsumption** —
`site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.tsx`
(uses `bg-highlight-orange`)
- **Paywall** — `site/src/components/Paywall/Paywall.stories.tsx` (uses
`border-highlight-magenta`)
- **WorkspaceStatusIndicator** —
`site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.stories.tsx`
- **Alert** — `site/src/components/Alert/Alert.stories.tsx`

---------

Co-authored-by: Jaayden Halko <jaayden.halko@gmail.com>
---
 site/src/components/InfoTooltip/InfoTooltip.tsx         | 2 +-
 site/src/components/StatusIndicator/StatusIndicator.tsx | 4 ++--
 site/src/index.css                                      | 8 +++-----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/site/src/components/InfoTooltip/InfoTooltip.tsx b/site/src/components/InfoTooltip/InfoTooltip.tsx
index 10fbbee0c3..e53cfaa0ec 100644
--- a/site/src/components/InfoTooltip/InfoTooltip.tsx
+++ b/site/src/components/InfoTooltip/InfoTooltip.tsx
@@ -24,7 +24,7 @@ const tooltipColorClasses: Record<ThemeRole, string> = {
 	success: "text-content-success",
 	danger: "text-content-destructive",
 	active: "text-content-link",
-	inactive: "text-highlight-grey",
+	inactive: "text-content-secondary",
 	preview: "text-highlight-purple",
 };
 
diff --git a/site/src/components/StatusIndicator/StatusIndicator.tsx b/site/src/components/StatusIndicator/StatusIndicator.tsx
index 3a7f31153b..c5a8b9c0f6 100644
--- a/site/src/components/StatusIndicator/StatusIndicator.tsx
+++ b/site/src/components/StatusIndicator/StatusIndicator.tsx
@@ -14,7 +14,7 @@ const statusIndicatorVariants = cva(
 			variant: {
 				success: "text-content-success",
 				failed: "text-content-destructive",
-				inactive: "text-highlight-grey",
+				inactive: "text-content-secondary",
 				warning: "text-content-warning",
 				pending: "text-highlight-sky",
 			},
@@ -58,7 +58,7 @@ const dotVariants = cva("rounded-full inline-block border-4 border-solid", {
 		variant: {
 			success: "bg-content-success border-surface-green",
 			failed: "bg-content-destructive border-surface-destructive",
-			inactive: "bg-highlight-grey border-surface-grey",
+			inactive: "bg-content-secondary border-surface-grey",
 			warning: "bg-content-warning border-surface-orange",
 			pending: "bg-highlight-sky border-surface-sky",
 		},
diff --git a/site/src/index.css b/site/src/index.css
index ce310c8f2b..053869765a 100644
--- a/site/src/index.css
+++ b/site/src/index.css
@@ -39,7 +39,7 @@
 		--surface-sky: 191, 67%, 89%;
 		--surface-red: 0 93% 94%;
 		--surface-purple: 259, 100%, 95%;
-		--surface-magenta: 290, 100%, 95%;
+		--surface-magenta: 289 100% 98%;
 		--border-purple: 255 92% 76%;
 		--border-default: 240 6% 90%;
 		--border-success: 142 76% 36%;
@@ -53,11 +53,10 @@
 		--radius: 0.5rem;
 		--highlight-purple: 271, 61%, 35%;
 		--highlight-green: 143 64% 24%;
-		--highlight-orange: 30 100% 54%;
-		--highlight-grey: 240 5% 65%;
+		--highlight-orange: 30 100% 32%;
 		--highlight-sky: 195, 61%, 22%;
 		--highlight-red: 0 74% 42%;
-		--highlight-magenta: 295, 68%, 46%;
+		--highlight-magenta: 295, 68%, 40%;
 		--git-added: 142 72% 29%;
 		--git-deleted: 0 74% 42%;
 		--git-modified: 17 88% 40%;
@@ -121,7 +120,6 @@
 		--highlight-purple: 269, 100%, 74%;
 		--highlight-green: 141 79% 85%;
 		--highlight-orange: 31 100% 70%;
-		--highlight-grey: 240 4% 46%;
 		--highlight-sky: 188, 75%, 80%;
 		--highlight-red: 0 91% 71%;
 		--highlight-magenta: 292, 100%, 78%;