diff --git a/src/lib/components/playground/Chat.svelte b/src/lib/components/playground/Chat.svelte
index deef61974..b06022026 100644
--- a/src/lib/components/playground/Chat.svelte
+++ b/src/lib/components/playground/Chat.svelte
@@ -298,7 +298,15 @@
 					>
 						<div class="flex-1 shrink-0">
 							<button
-								class="px-3.5 py-1.5 text-sm font-medium bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg shrink-0"
+								type="button"
+								class="px-3.5 py-1.5 text-sm font-medium bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg shrink-0 {($settings?.highContrastMode ??
+								false)
+									? ''
+									: 'outline-hidden'}"
+								aria-pressed={role === 'assistant'}
+								aria-label={$i18n.t(
+									role === 'user' ? 'Switch to Assistant role' : 'Switch to User role'
+								)}
 								on:click={() => {
 									role = role === 'user' ? 'assistant' : 'user';
 								}}