frontend/src/lib/timeline/BucketHeaderChip.svelte

@@ -28,10 +28,12 @@ const TAG_COLORS = new Set([
 let { name, color }: { name: string; color: string | null } = $props();
 
 const token = $derived(color && TAG_COLORS.has(color) ? color : null);
+// The tint paints the chip's fill + dot only — never the label text. The saturated
+// --c-tag-* tokens used AS text over their own wash drop below WCAG AA 4.5:1 for the
+// light tokens (amber ≈3.0, sand ≈3.2, sage ≈3.4); a fixed dark ink keeps every token
+// legible while the 18% wash still reads as a genuinely tinted chip (REQ-015).
 const chipStyle = $derived(
-	token
-		? `background-color: color-mix(in srgb, var(--c-tag-${token}) 14%, transparent); color: var(--c-tag-${token})`
-		: ''
+	token ? `background-color: color-mix(in srgb, var(--c-tag-${token}) 18%, transparent)` : ''
 );
 const dotStyle = $derived(token ? `background-color: var(--c-tag-${token})` : '');
 </script>
@@ -44,7 +46,6 @@ const dotStyle = $derived(token ? `background-color: var(--c-tag-${token})` : ''
 	class:border={!token}
 	class:border-line={!token}
 	class:bg-surface={!token}
-	class:text-ink-3={!token}
 >
 	<span class="sr-only">{m.timeline_tag_chip_label()}: </span>
 	<span
@@ -54,7 +55,10 @@ const dotStyle = $derived(token ? `background-color: var(--c-tag-${token})` : ''
 		class="inline-block h-2 w-2 flex-shrink-0 rounded-sm"
 		class:bg-ink-3={!token}
 	></span>
-	<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0"
-		>{name}</span
+	<span
+		data-testid="bucket-header-chip-label"
+		style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0"
+		class:text-ink={token}
+		class:text-ink-3={!token}>{name}</span
 	>
 </span>

frontend/src/lib/timeline/BucketHeaderChip.svelte.spec.ts

@@ -41,4 +41,17 @@ describe('BucketHeaderChip (REQ-015/009)', () => {
 		expect(document.body.textContent).toContain(evil);
 		expect(document.querySelector('img')).toBeNull();
 	});
+
+	it('paints the label in a fixed ink colour, never the saturated tag token (contrast, REQ-015)', () => {
+		// A saturated --c-tag-* token used as TEXT over its own wash fails 4.5:1 for the
+		// light tokens (amber/sand/sage ≈ 3:1). The tint must go to the background + dot;
+		// the label keeps a guaranteed-contrast ink token.
+		render(BucketHeaderChip, { name: 'Weihnachten', color: 'amber' });
+		const chip = document.querySelector('[data-testid="bucket-header-chip"]') as HTMLElement;
+		expect(chip.getAttribute('style') ?? '').not.toContain('color: var(--c-tag-');
+		const label = document.querySelector('[data-testid="bucket-header-chip-label"]') as HTMLElement;
+		expect(label.className).toContain('text-ink');
+		// still genuinely tinted — the token paints the wash and the dot
+		expect(document.body.innerHTML).toContain('var(--c-tag-amber)');
+	});
 });