diff --git a/webview-ui/playwright/vscode-theme-base.css b/webview-ui/playwright/vscode-theme-base.css
index 5226acb1cf..9e949edd0a 100644
--- a/webview-ui/playwright/vscode-theme-base.css
+++ b/webview-ui/playwright/vscode-theme-base.css
@@ -17,6 +17,20 @@ body {
 	padding: 16px;
 }
 
+.vscode-text-field-mock {
+	box-sizing: border-box;
+	background: var(--vscode-input-background);
+	border: 1px solid var(--vscode-input-border, transparent);
+	color: var(--vscode-input-foreground);
+	font: inherit;
+	padding: 4px 6px;
+}
+
+.vscode-text-field-mock::placeholder {
+	color: var(--vscode-input-placeholderForeground, var(--vscode-descriptionForeground));
+	opacity: 1;
+}
+
 /* @vscode/webview-ui-toolkit/react renders VSCodeButton as a bare
    <button appearance="primary|secondary"> outside VS Code's web-component
    runtime. Style it here so button screenshots match the real appearance. */
diff --git a/webview-ui/src/__mocks__/@vscode/webview-ui-toolkit/react.tsx b/webview-ui/src/__mocks__/@vscode/webview-ui-toolkit/react.tsx
index cc6d089a1a..204778be33 100644
--- a/webview-ui/src/__mocks__/@vscode/webview-ui-toolkit/react.tsx
+++ b/webview-ui/src/__mocks__/@vscode/webview-ui-toolkit/react.tsx
@@ -52,9 +52,15 @@ export const VSCodeLink = ({ children, href, ...props }: any) => (
 	</a>
 )
 
-export const VSCodeTextField = ({ value, onInput, "data-testid": dataTestId, children, ...props }: any) => (
-	<div>
-		<input data-testid={dataTestId} value={value} onInput={onInput} {...props} />
+export const VSCodeTextField = ({ value, onInput, "data-testid": dataTestId, children, className, ...props }: any) => (
+	<div className={className}>
+		<input
+			className="vscode-text-field-mock w-full"
+			data-testid={dataTestId}
+			value={value}
+			onInput={onInput}
+			{...props}
+		/>
 		{children}
 	</div>
 )
diff --git a/webview-ui/src/components/chat/CommandPatternSelector.tsx b/webview-ui/src/components/chat/CommandPatternSelector.tsx
index dc9e517dc7..ca19c6edd0 100644
--- a/webview-ui/src/components/chat/CommandPatternSelector.tsx
+++ b/webview-ui/src/components/chat/CommandPatternSelector.tsx
@@ -71,7 +71,7 @@ export const CommandPatternSelector: React.FC<CommandPatternSelectorProps> = ({
 					<span
 						className={cn(
 							"text-sm flex-1 group-hover:opacity-100",
-							isExpanded ? "opacity-100" : "opacity-40",
+							isExpanded ? "text-vscode-foreground" : "text-vscode-descriptionForeground",
 						)}>
 						<CheckCheck className="size-3 inline-block mr-2" />
 						{t("chat:commandExecution.manageCommands")}
@@ -79,7 +79,7 @@ export const CommandPatternSelector: React.FC<CommandPatternSelectorProps> = ({
 					<ChevronUp
 						className={cn(
 							"group-hover:opacity-100 size-4 transition-transform",
-							isExpanded ? "opacity-100" : "opacity-40 -rotate-180",
+							isExpanded ? "text-vscode-foreground" : "text-vscode-descriptionForeground -rotate-180",
 						)}
 					/>
 				</div>
@@ -135,12 +135,14 @@ export const CommandPatternSelector: React.FC<CommandPatternSelectorProps> = ({
 										)}>
 										<button
 											className={cn("p-1 rounded transition-all cursor-pointer", {
-												"bg-green-500/20 text-green-500 hover:bg-green-500/30":
+												"bg-vscode-list-activeSelectionBackground text-vscode-list-activeSelectionForeground hover:bg-vscode-list-focusBackground":
 													status === "allowed",
-												"text-vscode-descriptionForeground hover:text-green-500 hover:bg-green-500/10":
+												"text-vscode-descriptionForeground hover:text-vscode-foreground hover:bg-vscode-list-hoverBackground":
 													status !== "allowed",
 											})}
 											onClick={() => onAllowPatternChange(editState.value)}
+											aria-pressed={status === "allowed"}
+											data-testid="allow-command-pattern"
 											aria-label={t(
 												status === "allowed"
 													? "chat:commandExecution.removeFromAllowed"
@@ -157,11 +159,14 @@ export const CommandPatternSelector: React.FC<CommandPatternSelectorProps> = ({
 										)}>
 										<button
 											className={cn("p-1 rounded transition-all cursor-pointer", {
-												"bg-red-500/20 text-red-500 hover:bg-red-500/30": status === "denied",
-												"text-vscode-descriptionForeground hover:text-red-500 hover:bg-red-500/10":
+												"bg-vscode-list-activeSelectionBackground text-vscode-list-activeSelectionForeground hover:bg-vscode-list-focusBackground":
+													status === "denied",
+												"text-vscode-descriptionForeground hover:text-vscode-foreground hover:bg-vscode-list-hoverBackground":
 													status !== "denied",
 											})}
 											onClick={() => onDenyPatternChange(editState.value)}
+											aria-pressed={status === "denied"}
+											data-testid="deny-command-pattern"
 											aria-label={t(
 												status === "denied"
 													? "chat:commandExecution.removeFromDenied"
diff --git a/webview-ui/src/components/chat/ContextMenu.tsx b/webview-ui/src/components/chat/ContextMenu.tsx
index 14f8c22c76..04ceb2eab6 100644
--- a/webview-ui/src/components/chat/ContextMenu.tsx
+++ b/webview-ui/src/components/chat/ContextMenu.tsx
@@ -81,7 +81,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 						style={{
 							fontWeight: "bold",
 							fontSize: "0.85em",
-							opacity: 0.8,
+							color: "var(--vscode-descriptionForeground)",
 						}}>
 						{option.label}
 					</span>
@@ -95,7 +95,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 						{option.description && (
 							<span
 								style={{
-									opacity: 0.5,
+									color: "var(--vscode-descriptionForeground)",
 									fontSize: "0.9em",
 									lineHeight: "1.2",
 									whiteSpace: "nowrap",
@@ -115,7 +115,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 							{option.argumentHint && (
 								<span
 									style={{
-										opacity: 0.5,
+										color: "var(--vscode-descriptionForeground)",
 										fontSize: "0.9em",
 										lineHeight: "1.2",
 									}}>
@@ -126,7 +126,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 						{option.description && (
 							<span
 								style={{
-									opacity: 0.5,
+									color: "var(--vscode-descriptionForeground)",
 									fontSize: "0.9em",
 									lineHeight: "1.2",
 									whiteSpace: "nowrap",
@@ -154,7 +154,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 							<span
 								style={{
 									fontSize: "0.85em",
-									opacity: 0.7,
+									color: "var(--vscode-descriptionForeground)",
 									whiteSpace: "nowrap",
 									overflow: "hidden",
 									textOverflow: "ellipsis",
@@ -197,7 +197,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 									direction: "rtl",
 									textAlign: "right",
 									flex: 1,
-									opacity: 0.75,
+									color: "var(--vscode-descriptionForeground)",
 									fontSize: "0.75em",
 								}}>
 								{folderPath}
diff --git a/webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.fixture.tsx b/webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.fixture.tsx
new file mode 100644
index 0000000000..ed239f719c
--- /dev/null
+++ b/webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.fixture.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+
+import McpToolRow from "../../mcp/McpToolRow"
+import { CommandPatternSelector } from "../CommandPatternSelector"
+
+export function ThemeSensitiveStatusFixture() {
+	return (
+		<main
+			data-testid="status-surface"
+			className="w-[480px] space-y-5 rounded-lg border border-vscode-panel-border bg-vscode-editor-background p-4 text-vscode-editor-foreground">
+			<section aria-labelledby="commands-title" className="space-y-2">
+				<h2 id="commands-title" className="m-0 text-base font-semibold">
+					Command permissions
+				</h2>
+				<CommandPatternSelector
+					patterns={[
+						{ pattern: "pnpm test", description: "Run the test suite" },
+						{ pattern: "rm -rf", description: "Remove files recursively" },
+					]}
+					allowedCommands={["pnpm test"]}
+					deniedCommands={["rm -rf"]}
+					onAllowPatternChange={() => undefined}
+					onDenyPatternChange={() => undefined}
+				/>
+			</section>
+
+			<section aria-labelledby="mcp-title" className="space-y-2">
+				<h2 id="mcp-title" className="m-0 text-base font-semibold">
+					MCP tools
+				</h2>
+				<McpToolRow
+					tool={{
+						name: "search_workspace",
+						description: "Search files and symbols in the current workspace",
+						enabledForPrompt: false,
+						inputSchema: { type: "object", properties: {} },
+					}}
+					serverName="workspace-tools"
+				/>
+			</section>
+		</main>
+	)
+}
diff --git a/webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.tsx b/webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.tsx
new file mode 100644
index 0000000000..e2f79d196c
--- /dev/null
+++ b/webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.tsx
@@ -0,0 +1,41 @@
+import React from "react"
+
+import { expect, test } from "../../../../playwright/coverage-fixture"
+import { AppProviders } from "../../../../playwright/AppProviders"
+import { expectContrast } from "../../../../playwright/contrast"
+import { applyVisualTheme, visualThemes } from "../../../../playwright/themes"
+import { ThemeSensitiveStatusFixture } from "./ThemeSensitiveStatus.visual.fixture"
+
+for (const theme of visualThemes) {
+	test(`audits status controls in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
+		await applyVisualTheme(page, theme)
+		const component = await mount(
+			<AppProviders>
+				<ThemeSensitiveStatusFixture />
+			</AppProviders>,
+		)
+		const surface = component.getByTestId("status-surface")
+
+		await component.getByRole("button", { name: /auto-approved commands/i }).click()
+		const allowButton = component.getByTestId("allow-command-pattern").first()
+		const denyButton = component.getByTestId("deny-command-pattern").nth(1)
+		await expect(allowButton).toHaveAttribute("aria-pressed", "true")
+		await expect(denyButton).toHaveAttribute("aria-pressed", "true")
+		await expectContrast(allowButton, {
+			background: allowButton,
+			minimum: 3,
+			label: `${theme.name} allowed command indicator`,
+		})
+		await expectContrast(denyButton, {
+			background: denyButton,
+			minimum: 3,
+			label: `${theme.name} denied command indicator`,
+		})
+		await expectContrast(component.getByText("Search files and symbols in the current workspace"), {
+			background: surface,
+			label: `${theme.name} disabled MCP description`,
+		})
+
+		await expect(component).toHaveScreenshot(`theme-sensitive-status-${theme.name}.png`)
+	})
+}
diff --git a/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-dark.png b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-dark.png
new file mode 100644
index 0000000000..8aa77a1ac0
Binary files /dev/null and b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-dark.png differ
diff --git a/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-high-contrast-light.png b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-high-contrast-light.png
new file mode 100644
index 0000000000..bcd48238d0
Binary files /dev/null and b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-high-contrast-light.png differ
diff --git a/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-high-contrast.png b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-high-contrast.png
new file mode 100644
index 0000000000..4114f1c8df
Binary files /dev/null and b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-high-contrast.png differ
diff --git a/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-light.png b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-light.png
new file mode 100644
index 0000000000..03a2127a1f
Binary files /dev/null and b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-light.png differ
diff --git a/webview-ui/src/components/chat/checkpoints/CheckpointSaved.tsx b/webview-ui/src/components/chat/checkpoints/CheckpointSaved.tsx
index 170065d737..8328b9ce1e 100644
--- a/webview-ui/src/components/chat/checkpoints/CheckpointSaved.tsx
+++ b/webview-ui/src/components/chat/checkpoints/CheckpointSaved.tsx
@@ -87,17 +87,14 @@ export const CheckpointSaved = ({
 			className="flex items-center justify-between gap-2 pt-2 pb-3"
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}>
-			<div className="flex items-center gap-2 text-blue-400 whitespace-nowrap">
+			<div className="flex items-center gap-2 text-vscode-textLink-foreground whitespace-nowrap">
 				<GitCommitVertical className="w-4" />
 				<span className="font-semibold">{t("chat:checkpoint.regular")}</span>
-				{isCurrent && <span className="text-muted">({t("chat:checkpoint.current")})</span>}
+				{isCurrent && (
+					<span className="text-vscode-descriptionForeground">({t("chat:checkpoint.current")})</span>
+				)}
 			</div>
-			<span
-				className="block w-full h-[2px] mt-[2px] text-xs"
-				style={{
-					backgroundImage:
-						"linear-gradient(90deg, rgba(0, 188, 255, .65), rgba(0, 188, 255, .65) 80%, rgba(0, 188, 255, 0) 99%)",
-				}}></span>
+			<span className="block w-full h-[2px] mt-[2px] bg-vscode-textLink-foreground text-xs" aria-hidden="true" />
 
 			{/* Keep menu visible while hovering, popover is open, or briefly after close to prevent jump */}
 			<div data-testid="checkpoint-menu-container" className={cn("h-4 -mt-2", menuVisible ? "block" : "hidden")}>
diff --git a/webview-ui/src/components/common/CodeBlock.tsx b/webview-ui/src/components/common/CodeBlock.tsx
index 042b764a9a..d9410b4329 100644
--- a/webview-ui/src/components/common/CodeBlock.tsx
+++ b/webview-ui/src/components/common/CodeBlock.tsx
@@ -9,8 +9,10 @@ import { ChevronDown, ChevronUp, Copy, Check } from "lucide-react"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { StandardTooltip } from "@/components/ui"
 
-export const CODE_BLOCK_BG_COLOR = "var(--vscode-editor-background, --vscode-sideBar-background, rgb(30 30 30))"
-export const WRAPPER_ALPHA = "cc" // 80% opacity
+export const CODE_BLOCK_BG_COLOR =
+	"var(--vscode-textCodeBlock-background, var(--vscode-editor-background, var(--vscode-sideBar-background, rgb(30 30 30))))"
+export const CODE_BLOCK_TOOLBAR_BG_COLOR =
+	"color-mix(in srgb, var(--vscode-editor-background, var(--vscode-sideBar-background, rgb(30 30 30))) 90%, transparent)"
 
 // Configuration constants
 export const WINDOW_SHADE_SETTINGS = {
@@ -42,14 +44,14 @@ interface CodeBlockProps {
 const CodeBlockButton = styled.button`
 	background: transparent;
 	border: none;
-	color: var(--vscode-foreground);
+	color: var(--vscode-icon-foreground, var(--vscode-foreground));
 	cursor: var(--copy-button-cursor, default);
 	padding: 4px;
 	margin: 0 0px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	opacity: 0.4;
+	opacity: 1;
 	border-radius: 3px;
 	pointer-events: var(--copy-button-events, none);
 	margin-left: 4px;
@@ -73,7 +75,7 @@ const CodeBlockButtonWrapper = styled.div`
 	right: var(--copy-button-right, 8px);
 	height: auto;
 	z-index: 40;
-	background: ${CODE_BLOCK_BG_COLOR}${WRAPPER_ALPHA};
+	background: ${CODE_BLOCK_TOOLBAR_BG_COLOR};
 	overflow: visible;
 	pointer-events: none;
 	opacity: var(--copy-button-opacity, 0);
diff --git a/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.fixture.tsx b/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.fixture.tsx
new file mode 100644
index 0000000000..0b03aac5a0
--- /dev/null
+++ b/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.fixture.tsx
@@ -0,0 +1,50 @@
+import React from "react"
+
+import { TerminalOutput } from "../../chat/TerminalOutput"
+import { StyledPre } from "../CodeBlock"
+import DiffView from "../DiffView"
+
+const diff = `@@ -1,3 +1,3 @@
+ export function greet(name: string) {
+-  return "Hello " + name
++  return \`Hello \${name}\`
+ }`
+
+export function RenderedContentContrastFixture() {
+	return (
+		<main className="w-[620px] space-y-4 rounded-lg border border-vscode-panel-border bg-vscode-editor-background p-4 text-vscode-editor-foreground">
+			<section aria-labelledby="code-title" className="space-y-2">
+				<h2 id="code-title" className="m-0 text-base font-semibold">
+					Code response
+				</h2>
+				<div data-testid="code-block">
+					<StyledPre wordwrap="true" windowshade="false">
+						<pre>
+							<code>const greeting = &quot;Hello, Zoo Code&quot;</code>
+						</pre>
+					</StyledPre>
+				</div>
+			</section>
+
+			<section aria-labelledby="diff-title" className="space-y-2">
+				<h2 id="diff-title" className="m-0 text-base font-semibold">
+					Proposed edit
+				</h2>
+				<div data-testid="diff-view">
+					<DiffView source={diff} />
+				</div>
+			</section>
+
+			<section aria-labelledby="terminal-title" className="space-y-2">
+				<h2 id="terminal-title" className="m-0 text-base font-semibold">
+					Terminal output
+				</h2>
+				<div data-testid="terminal-output">
+					<TerminalOutput
+						content={"Tests passed\n\u001b[32m24 passing\u001b[0m  \u001b[33m1 skipped\u001b[0m"}
+					/>
+				</div>
+			</section>
+		</main>
+	)
+}
diff --git a/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx b/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx
new file mode 100644
index 0000000000..6259b6f300
--- /dev/null
+++ b/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx
@@ -0,0 +1,30 @@
+import React from "react"
+
+import { expect, test } from "../../../../playwright/coverage-fixture"
+import { expectContrast } from "../../../../playwright/contrast"
+import { applyVisualTheme, visualThemes } from "../../../../playwright/themes"
+import { RenderedContentContrastFixture } from "./RenderedContentContrast.visual.fixture"
+
+for (const theme of visualThemes) {
+	test(`audits rendered content in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
+		await applyVisualTheme(page, theme)
+		const component = await mount(<RenderedContentContrastFixture />)
+
+		const code = component.getByTestId("code-block").locator("code")
+		await expect(code).toContainText("Hello, Zoo Code")
+		await expectContrast(code, {
+			background: component.getByTestId("code-block").locator("pre"),
+			label: `${theme.name} code text`,
+		})
+
+		const inserted = component.getByTestId("diff-view").locator(".diff-content-inserted").first()
+		const removed = component.getByTestId("diff-view").locator(".diff-content-removed").first()
+		await expectContrast(inserted, { background: inserted, label: `${theme.name} inserted diff text` })
+		await expectContrast(removed, { background: removed, label: `${theme.name} removed diff text` })
+
+		const terminal = component.getByTestId("terminal-output").locator("pre")
+		await expectContrast(terminal, { background: terminal, label: `${theme.name} terminal text` })
+
+		await expect(component).toHaveScreenshot(`rendered-content-${theme.name}.png`)
+	})
+}
diff --git a/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-dark.png b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-dark.png
new file mode 100644
index 0000000000..eb9ac5a683
Binary files /dev/null and b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-dark.png differ
diff --git a/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast-light.png b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast-light.png
new file mode 100644
index 0000000000..4dec7f830d
Binary files /dev/null and b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast-light.png differ
diff --git a/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast.png b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast.png
new file mode 100644
index 0000000000..350dfd87cb
Binary files /dev/null and b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast.png differ
diff --git a/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-light.png b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-light.png
new file mode 100644
index 0000000000..0f374d5139
Binary files /dev/null and b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-light.png differ
diff --git a/webview-ui/src/components/history/__tests__/HistoryView.visual.tsx b/webview-ui/src/components/history/__tests__/HistoryView.visual.tsx
new file mode 100644
index 0000000000..72f663fc55
--- /dev/null
+++ b/webview-ui/src/components/history/__tests__/HistoryView.visual.tsx
@@ -0,0 +1,27 @@
+import React from "react"
+
+import { expect, test } from "../../../../playwright/coverage-fixture"
+import { AppProviders } from "../../../../playwright/AppProviders"
+import { expectContrast } from "../../../../playwright/contrast"
+import { applyVisualTheme, visualThemes } from "../../../../playwright/themes"
+import HistoryView from "../HistoryView"
+
+for (const theme of visualThemes) {
+	test(`renders empty history in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
+		await applyVisualTheme(page, theme)
+		const component = await mount(
+			<AppProviders initialState={{ taskHistory: [] }}>
+				<div className="h-[640px] w-[480px] bg-vscode-editor-background">
+					<HistoryView onDone={() => undefined} />
+				</div>
+			</AppProviders>,
+		)
+
+		const screen = component.locator(".bg-vscode-editor-background").first()
+		const heading = component.getByRole("heading", { name: /history/i })
+		await expect(heading).toBeVisible()
+		await expectContrast(heading, { background: screen, label: `${theme.name} history heading` })
+
+		await expect(component).toHaveScreenshot(`history-empty-${theme.name}.png`)
+	})
+}
diff --git a/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-dark.png b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-dark.png
new file mode 100644
index 0000000000..6ba8885ca7
Binary files /dev/null and b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-dark.png differ
diff --git a/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-high-contrast-light.png b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-high-contrast-light.png
new file mode 100644
index 0000000000..fbc57e12ca
Binary files /dev/null and b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-high-contrast-light.png differ
diff --git a/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-high-contrast.png b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-high-contrast.png
new file mode 100644
index 0000000000..1d164a4d60
Binary files /dev/null and b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-high-contrast.png differ
diff --git a/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-light.png b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-light.png
new file mode 100644
index 0000000000..291191fd97
Binary files /dev/null and b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-light.png differ
diff --git a/webview-ui/src/components/marketplace/components/MarketplaceInstallModal.tsx b/webview-ui/src/components/marketplace/components/MarketplaceInstallModal.tsx
index eaf3549781..7556630c7b 100644
--- a/webview-ui/src/components/marketplace/components/MarketplaceInstallModal.tsx
+++ b/webview-ui/src/components/marketplace/components/MarketplaceInstallModal.tsx
@@ -239,7 +239,12 @@ export const MarketplaceInstallModal: React.FC<MarketplaceInstallModalProps> = (
 					// Post-installation options
 					<div className="space-y-4 py-2">
 						<div className="text-center space-y-4">
-							<div className="text-green-500 text-lg">✓ {t("marketplace:install.installed")}</div>
+							<div className="text-vscode-foreground text-lg">
+								<span className="text-vscode-charts-green" aria-hidden="true">
+									✓
+								</span>{" "}
+								{t("marketplace:install.installed")}
+							</div>
 							<p className="text-sm text-muted-foreground">
 								{item.type === "mcp"
 									? t("marketplace:install.whatNextMcp")
@@ -264,7 +269,7 @@ export const MarketplaceInstallModal: React.FC<MarketplaceInstallModalProps> = (
 										disabled={!hasWorkspace}
 										className="rounded-full"
 									/>
-									<span className={!hasWorkspace ? "opacity-50" : ""}>
+									<span className={!hasWorkspace ? "text-vscode-descriptionForeground" : ""}>
 										{t("marketplace:install.project")}
 									</span>
 								</label>
@@ -352,7 +357,7 @@ export const MarketplaceInstallModal: React.FC<MarketplaceInstallModalProps> = (
 						)}
 						{/* Validation Error */}
 						{validationError && (
-							<div className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 rounded p-2">
+							<div className="text-sm text-vscode-errorForeground bg-vscode-editor-background border border-vscode-errorForeground rounded p-2">
 								{validationError}
 							</div>
 						)}
diff --git a/webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx b/webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx
index e7cb1f70e3..3b8df52176 100644
--- a/webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx
+++ b/webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx
@@ -159,7 +159,7 @@ export const MarketplaceItemCard: React.FC<MarketplaceItemCardProps> = ({ item,
 					<div className="relative flex flex-wrap gap-1 my-2">
 						{/* Installation status badge on the left */}
 						{isInstalled && (
-							<span className="text-xs px-2 py-0.5 rounded-sm h-5 flex items-center bg-green-600/20 text-green-400 border border-green-600/30 shrink-0">
+							<span className="text-xs px-2 py-0.5 rounded-sm h-5 flex items-center bg-vscode-editor-background text-vscode-foreground border border-vscode-charts-green shrink-0">
 								{t("marketplace:items.card.installed")}
 							</span>
 						)}
diff --git a/webview-ui/src/components/mcp/McpToolRow.tsx b/webview-ui/src/components/mcp/McpToolRow.tsx
index 5dea579193..44f3c24f4c 100644
--- a/webview-ui/src/components/mcp/McpToolRow.tsx
+++ b/webview-ui/src/components/mcp/McpToolRow.tsx
@@ -52,14 +52,12 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp, isInChatCo
 						className={`codicon codicon-symbol-method mr-2 flex-shrink-0 ${
 							isToolEnabled
 								? "text-vscode-symbolIcon-methodForeground"
-								: "text-vscode-descriptionForeground opacity-60"
+								: "text-vscode-descriptionForeground"
 						}`}></span>
 					<StandardTooltip content={tool.name}>
 						<span
 							className={`font-medium truncate ${
-								isToolEnabled
-									? "text-vscode-foreground"
-									: "text-vscode-descriptionForeground opacity-60"
+								isToolEnabled ? "text-vscode-foreground" : "text-vscode-descriptionForeground"
 							}`}>
 							{tool.name}
 						</span>
@@ -98,19 +96,14 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp, isInChatCo
 				)}
 			</div>
 			{tool.description && (
-				<div
-					className={`mt-1 text-xs text-vscode-descriptionForeground ${
-						isToolEnabled ? "opacity-80" : "opacity-40"
-					}`}>
-					{tool.description}
-				</div>
+				<div className="mt-1 text-xs text-vscode-descriptionForeground">{tool.description}</div>
 			)}
 			{isToolEnabled &&
 				tool.inputSchema &&
 				"properties" in tool.inputSchema &&
 				Object.keys(tool.inputSchema.properties as Record<string, any>).length > 0 && (
 					<div className="mt-2 text-xs border border-vscode-panel-border rounded p-2">
-						<div className="mb-1 text-[11px] uppercase opacity-80 text-vscode-descriptionForeground">
+						<div className="mb-1 text-[11px] uppercase text-vscode-descriptionForeground">
 							{t("mcp:tool.parameters")}
 						</div>
 						{Object.entries(tool.inputSchema.properties as Record<string, any>).map(
@@ -127,7 +120,7 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp, isInChatCo
 											{paramName}
 											{isRequired && <span className="text-vscode-errorForeground">*</span>}
 										</code>
-										<span className="opacity-80 break-words text-vscode-descriptionForeground">
+										<span className="break-words text-vscode-descriptionForeground">
 											{schema.description || t("mcp:tool.noDescription")}
 										</span>
 									</div>
diff --git a/webview-ui/src/components/mcp/__tests__/McpToolRow.spec.tsx b/webview-ui/src/components/mcp/__tests__/McpToolRow.spec.tsx
index f686a23f00..156ecb0653 100644
--- a/webview-ui/src/components/mcp/__tests__/McpToolRow.spec.tsx
+++ b/webview-ui/src/components/mcp/__tests__/McpToolRow.spec.tsx
@@ -248,7 +248,7 @@ describe("McpToolRow", () => {
 		expect(screen.getByText("First parameter")).toBeInTheDocument()
 	})
 
-	it("grays out tool name and description when tool is disabled", () => {
+	it("uses readable secondary text when tool is disabled", () => {
 		const disabledTool = {
 			...mockTool,
 			enabledForPrompt: false,
@@ -259,11 +259,10 @@ describe("McpToolRow", () => {
 		const toolName = screen.getByText("test-tool")
 		const toolDescription = screen.getByText("A disabled tool")
 
-		// Check that the tool name has the grayed out classes
-		expect(toolName).toHaveClass("text-vscode-descriptionForeground", "opacity-60")
-
-		// Check that the description has reduced opacity
-		expect(toolDescription).toHaveClass("opacity-40")
+		expect(toolName).toHaveClass("text-vscode-descriptionForeground")
+		expect(toolDescription).toHaveClass("text-vscode-descriptionForeground")
+		expect(toolName.className).not.toMatch(/opacity-/)
+		expect(toolDescription.className).not.toMatch(/opacity-/)
 	})
 
 	it("shows normal styling for tool name and description when tool is enabled", () => {
@@ -277,12 +276,9 @@ describe("McpToolRow", () => {
 		const toolName = screen.getByText("test-tool")
 		const toolDescription = screen.getByText("An enabled tool")
 
-		// Check that the tool name has normal styling
 		expect(toolName).toHaveClass("text-vscode-foreground")
-		expect(toolName).not.toHaveClass("text-vscode-descriptionForeground", "opacity-60")
-
-		// Check that the description has normal opacity
-		expect(toolDescription).toHaveClass("opacity-80")
-		expect(toolDescription).not.toHaveClass("opacity-40")
+		expect(toolName).not.toHaveClass("text-vscode-descriptionForeground")
+		expect(toolDescription).toHaveClass("text-vscode-descriptionForeground")
+		expect(toolDescription.className).not.toMatch(/opacity-/)
 	})
 })
diff --git a/webview-ui/src/components/settings/providers/__tests__/__screenshots__/openai-compatible-azure-guidance-dark.png b/webview-ui/src/components/settings/providers/__tests__/__screenshots__/openai-compatible-azure-guidance-dark.png
index e61ee8406d..820e5b7629 100644
Binary files a/webview-ui/src/components/settings/providers/__tests__/__screenshots__/openai-compatible-azure-guidance-dark.png and b/webview-ui/src/components/settings/providers/__tests__/__screenshots__/openai-compatible-azure-guidance-dark.png differ
diff --git a/webview-ui/src/components/welcome/WelcomeLanding.tsx b/webview-ui/src/components/welcome/WelcomeLanding.tsx
new file mode 100644
index 0000000000..e699f1dc79
--- /dev/null
+++ b/webview-ui/src/components/welcome/WelcomeLanding.tsx
@@ -0,0 +1,45 @@
+import { Trans } from "react-i18next"
+
+import { Button } from "@src/components/ui"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
+
+import { Tab, TabContent } from "../common/Tab"
+import RooHero from "./RooHero"
+
+interface WelcomeLandingProps {
+	onGetStarted: () => void
+	onImportSettings: () => void
+}
+
+export function WelcomeLanding({ onGetStarted, onImportSettings }: WelcomeLandingProps) {
+	const { t } = useAppTranslation()
+
+	return (
+		<Tab>
+			<TabContent className="relative flex flex-col gap-4 p-6 justify-center">
+				<RooHero />
+				<h2 className="mt-0 mb-0 text-xl">{t("welcome:landing.greeting")}</h2>
+
+				<div className="space-y-4 leading-normal">
+					<p className="text-base text-vscode-foreground">
+						<Trans i18nKey="welcome:landing.introduction" />
+					</p>
+				</div>
+
+				<div className="mt-2 flex gap-2 items-center">
+					<Button onClick={onGetStarted} variant="primary">
+						{t("welcome:providerSignup.heading")}
+					</Button>
+				</div>
+
+				<div className="absolute bottom-6 left-6">
+					<button
+						onClick={onImportSettings}
+						className="cursor-pointer bg-transparent border-none p-0 text-vscode-foreground hover:underline">
+						{t("welcome:importSettings")}
+					</button>
+				</div>
+			</TabContent>
+		</Tab>
+	)
+}
diff --git a/webview-ui/src/components/welcome/WelcomeViewProvider.tsx b/webview-ui/src/components/welcome/WelcomeViewProvider.tsx
index 26033739d5..5a77a6c111 100644
--- a/webview-ui/src/components/welcome/WelcomeViewProvider.tsx
+++ b/webview-ui/src/components/welcome/WelcomeViewProvider.tsx
@@ -13,7 +13,7 @@ import { Button } from "@src/components/ui"
 import ApiOptions from "../settings/ApiOptions"
 import { Tab, TabContent } from "../common/Tab"
 
-import RooHero from "./RooHero"
+import { WelcomeLanding } from "./WelcomeLanding"
 
 const DEFAULT_WELCOME_API_CONFIGURATION: ProviderSettings = {
 	apiProvider: "openrouter",
@@ -94,32 +94,10 @@ const WelcomeViewProvider = () => {
 
 	if (!showProviderSetup) {
 		return (
-			<Tab>
-				<TabContent className="relative flex flex-col gap-4 p-6 justify-center">
-					<RooHero />
-					<h2 className="mt-0 mb-0 text-xl">{t("welcome:landing.greeting")}</h2>
-
-					<div className="space-y-4 leading-normal">
-						<p className="text-base text-vscode-foreground">
-							<Trans i18nKey="welcome:landing.introduction" />
-						</p>
-					</div>
-
-					<div className="mt-2 flex gap-2 items-center">
-						<Button onClick={handleGetStarted} variant="primary">
-							{t("welcome:providerSignup.heading")}
-						</Button>
-					</div>
-
-					<div className="absolute bottom-6 left-6">
-						<button
-							onClick={() => vscode.postMessage({ type: "importSettings" })}
-							className="cursor-pointer bg-transparent border-none p-0 text-vscode-foreground hover:underline">
-							{t("welcome:importSettings")}
-						</button>
-					</div>
-				</TabContent>
-			</Tab>
+			<WelcomeLanding
+				onGetStarted={handleGetStarted}
+				onImportSettings={() => vscode.postMessage({ type: "importSettings" })}
+			/>
 		)
 	}
 
diff --git a/webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx b/webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx
new file mode 100644
index 0000000000..93305a6f0f
--- /dev/null
+++ b/webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx
@@ -0,0 +1,31 @@
+import React from "react"
+
+import { expect, test } from "../../../../playwright/coverage-fixture"
+import { AppProviders } from "../../../../playwright/AppProviders"
+import { expectContrast } from "../../../../playwright/contrast"
+import { applyVisualTheme, visualThemes } from "../../../../playwright/themes"
+import { WelcomeLanding } from "../WelcomeLanding"
+
+for (const theme of visualThemes) {
+	test(`renders the full welcome screen in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
+		await applyVisualTheme(page, theme)
+		const component = await mount(
+			<AppProviders initialState={{ apiConfiguration: {} }}>
+				<div className="h-[640px] w-[480px] bg-vscode-editor-background">
+					<WelcomeLanding onGetStarted={() => undefined} onImportSettings={() => undefined} />
+				</div>
+			</AppProviders>,
+		)
+
+		const screen = component.locator(".bg-vscode-editor-background").first()
+		const heading = component.getByRole("heading", { level: 2 })
+		await expect(heading).toBeVisible()
+		await expectContrast(heading, { background: screen, label: `${theme.name} welcome heading` })
+		await expectContrast(component.getByRole("button", { name: /provider/i }).first(), {
+			background: component.getByRole("button", { name: /provider/i }).first(),
+			label: `${theme.name} welcome action`,
+		})
+
+		await expect(component).toHaveScreenshot(`welcome-screen-${theme.name}.png`)
+	})
+}
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-dark.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-dark.png
new file mode 100644
index 0000000000..8dc2c2e74a
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-dark.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast-light.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast-light.png
new file mode 100644
index 0000000000..88ed541b08
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast-light.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast.png
new file mode 100644
index 0000000000..72d5ed699b
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-light.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-light.png
new file mode 100644
index 0000000000..0a0ee6f0ee
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-light.png differ