diff --git a/frontend/src/routes/DocumentList.svelte b/frontend/src/routes/DocumentList.svelte
index 71994e15..38ce333e 100644
--- a/frontend/src/routes/DocumentList.svelte
+++ b/frontend/src/routes/DocumentList.svelte
@@ -28,7 +28,7 @@ let {
 	{#if canWrite}
 		<a
 			href="/documents/new"
-			class="inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
+			class="inline-flex items-center gap-1 text-sm font-medium text-ink-2 transition-colors hover:text-ink"
 		>
 			<img
 				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
diff --git a/frontend/src/routes/conversations/+page.svelte b/frontend/src/routes/conversations/+page.svelte
index 25665cdb..05b4b522 100644
--- a/frontend/src/routes/conversations/+page.svelte
+++ b/frontend/src/routes/conversations/+page.svelte
@@ -50,7 +50,7 @@ function swapPersons() {
 	<!-- Page Header -->
 	<div class="mb-8 border-b border-ink/10 pb-4">
 		<h1 class="font-serif text-3xl font-medium text-ink">{m.conv_heading()}</h1>
-		<p class="mt-2 font-sans text-sm text-ink/60">
+		<p class="mt-2 font-sans text-sm text-ink-2">
 			{m.conv_subtitle()}
 		</p>
 	</div>
diff --git a/frontend/src/routes/conversations/ConversationTimeline.svelte b/frontend/src/routes/conversations/ConversationTimeline.svelte
index c1cac55f..6fc8bc56 100644
--- a/frontend/src/routes/conversations/ConversationTimeline.svelte
+++ b/frontend/src/routes/conversations/ConversationTimeline.svelte
@@ -57,7 +57,7 @@ const enrichedDocuments = $derived(
 		<a
 			data-testid="conv-new-doc-link"
 			href="/documents/new?senderId={senderId}&receiverId={receiverId}"
-			class="inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
+			class="inline-flex items-center gap-1 text-sm font-medium text-ink-2 transition-colors hover:text-ink"
 		>
 			<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"
diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index c907cd47..2c191046 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -73,8 +73,11 @@
 
 	--c-ink: #012851;
 	--c-ink-2: #4b5563; /* gray-600 — 7.6:1 on white, 6.6:1 on canvas — WCAG AA ✓ */
-	--c-ink-3: #6b7280; /* gray-500 — 4.8:1 on white — WCAG AA ✓; use only on surface, not canvas */
+	--c-ink-3: #6b7280; /* gray-500 — 4.8:1 on white, ~4.6:1 on canvas — WCAG AA ✓ */
 
+	/* ⚠ accent — decorative use only (borders, icon tints, bg fills)
+	   Light mode: #a1dcd8 on white = 1.52:1 — WCAG FAIL. Never use as text colour.
+	   For interactive text labels use text-primary or text-ink instead. */
 	--c-accent: #a1dcd8;
 	--c-accent-bg: rgba(161, 220, 216, 0.15);
 
diff --git a/frontend/src/routes/persons/+page.svelte b/frontend/src/routes/persons/+page.svelte
index 779eff5c..1d9be7ba 100644
--- a/frontend/src/routes/persons/+page.svelte
+++ b/frontend/src/routes/persons/+page.svelte
@@ -30,13 +30,13 @@ function handleSearch() {
 	>
 		<div>
 			<h1 class="font-serif text-3xl font-medium text-ink">{m.persons_heading()}</h1>
-			<p class="mt-2 max-w-xl font-sans text-sm text-ink/60">
+			<p class="mt-2 max-w-xl font-sans text-sm text-ink-2">
 				{m.persons_subtitle()}
 			</p>
 			{#if data.canWrite}
 				<a
 					href="/persons/new"
-					class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
+					class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-ink-2 transition-colors hover:text-ink"
 				>
 					<img
 						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"