diff --git a/src/app.css b/src/app.css
index 0a94f3f..70a5681 100644
--- a/src/app.css
+++ b/src/app.css
@@ -24,7 +24,8 @@
 
 	/* Accents. --accent is overridden per page where a page has its own hue. */
 	--accent: #3366ff;
-	--accent-nav: #1abc9c;
+	/* #1abc9c darkened to 5:1 contrast on --surface-page. */
+	--accent-nav: #0f705d;
 	--danger: #aa0000;
 
 	--space-1: 4px;
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index 5e5901f..73c9424 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -75,7 +75,7 @@
 		display: block;
 		padding: var(--space-4) var(--space-3) var(--space-4) var(--space-6);
 		font-size: 14px;
-		transition: color 200ms ease-in;
+		transition: color 80ms ease-out;
 	}
 
 	a:hover {
@@ -111,6 +111,12 @@
 		opacity: 0.85;
 	}
 
+	/* Full opacity so the accent colour keeps its contrast. */
+	.sub a:hover,
+	.sub a.active {
+		opacity: 1;
+	}
+
 	/* Tighter gutters once the column narrows, so long labels like
 	   "Navigation Benchmark" wrap over two lines rather than three. */
 	@media (max-width: 64rem) {