frontend/src/lib/components/MentionDropdown.svelte

@@ -127,7 +127,10 @@ function selectItem(item: Person) {
 			<div
 				class={[
 					'flex min-h-[44px] cursor-pointer flex-col gap-1 px-3 py-2.5 text-left hover:bg-canvas',
-					i === highlightedIndex && 'bg-brand-mint/20 ring-2 ring-brand-mint ring-inset'
+					// brand-mint ring (≈2.5:1 on white) fails WCAG 1.4.11 Non-Text
+					// Contrast for a meaningful keyboard-highlight indicator. brand-navy
+					// gives ~14.5:1 against the bg-brand-mint/20 row. Leonie #5621.
+					i === highlightedIndex && 'bg-brand-mint/20 ring-2 ring-brand-navy ring-inset'
 				]}
 				role="option"
 				aria-selected={i === highlightedIndex}

frontend/src/lib/components/PersonMentionEditor.svelte

@@ -103,6 +103,9 @@ onMount(() => {
 			}),
 			CustomMention.configure({
 				renderHTML({ node }) {
+					// Underline color matches the read-mode .person-mention rule
+					// (ink at ~50% alpha) — brand-mint on white fails WCAG 1.4.11
+					// Non-Text Contrast (≈1.7:1, needs 3:1). Leonie #5621.
 					return [
 						'span',
 						{
@@ -110,7 +113,7 @@ onMount(() => {
 							'data-person-id': node.attrs.personId,
 							'data-display-name': node.attrs.displayName,
 							class:
-								'mention-token underline decoration-brand-mint underline-offset-2 text-brand-navy font-medium'
+								'mention-token underline decoration-ink/50 underline-offset-2 text-brand-navy font-medium'
 						},
 						`@${node.attrs.displayName}`
 					];