diff --git a/src/app.css b/src/app.css
index f30259dc81..f0b54219d0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -855,6 +855,23 @@ body {
 	}
 }
 
+/* High Contrast Mode: muted text fails WCAG 1.4.3 (2.07:1 light, 3.12:1 dark).
+   :where() keeps these at low specificity so hover variants still win. */
+@layer utilities {
+	html:where(.high-contrast):not(:where(.dark)) .text-gray-400 {
+		color: var(--color-gray-600);
+	}
+
+	html:where(.high-contrast).dark .dark\:text-gray-600 {
+		color: var(--color-gray-400);
+	}
+
+	/* Elements that hover to a lighter grey than the new resting colour. */
+	html:where(.high-contrast):not(:where(.dark)) .hover\:text-gray-500:hover {
+		color: var(--color-gray-800);
+	}
+}
+
 /* High Contrast Mode: gray-500 muted text is 2.77:1 in light (WCAG 1.4.3 wants 4.5:1).
    The utility stays in the layer so hover variants still outrank it; the classes below
    are unlayered, so their override has to be too. */
diff --git a/src/lib/components/admin/Settings/Audio.svelte b/src/lib/components/admin/Settings/Audio.svelte
index d68f37cf97..20de15aec6 100644
--- a/src/lib/components/admin/Settings/Audio.svelte
+++ b/src/lib/components/admin/Settings/Audio.svelte
@@ -83,7 +83,7 @@
 	const textareaClass =
 		'w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
 	const linkedHelpClass =
-		'text-[0.6875rem] text-gray-400 dark:text-gray-600 [&_a]:text-gray-600 [&_a]:hover:underline dark:[&_a]:text-gray-300';
+		'text-[0.6875rem] text-gray-400 dark:text-gray-600 [&_a]:text-gray-900 [&_a]:hover:underline dark:[&_a]:text-gray-300';
 
 	const getModels = async () => {
 		if (TTS_ENGINE === '') {