web/scripts/check-tint-contrast.js

@@ -65,10 +65,13 @@ export function findCss(source) {
 }
 
 // Hues that fail AA as text even on a plain surface, so the raw hue is never
-// text at all: error measures 2.64:1 on slate and 3.23 on iron in dark mode,
+// text at all. Dark mode, against 4.5:
-// against 4.5; error-fg measures 5.30 at worst. A border or outline in the
+//   error   2.64 on slate, 3.23 on iron   → error-fg 5.30 at worst
-// hue is a graphic with a 3:1 floor and stays allowed.
+//   accent  2.21 on slate, 3.04 on the page → accent-fg 5.62 at worst (#5318)
-export const TEXT_NEVER_RAW = ['error'];
+// Accent icons (the liked heart, active shuffle/repeat) follow too: as
+// graphics they only need 3:1, and the raw accent misses even that on iron.
+// A border or outline in the hue is a graphic and stays allowed.
+export const TEXT_NEVER_RAW = ['error', 'accent'];
 
 /** Raw text-X classes and color: var(--fs-X) for the hues above. */
 export function findRawText(source) {

web/scripts/check-tint-contrast.test.js

@@ -42,6 +42,13 @@ describe('hue-on-own-tint check (#3150)', () => {
       expect(findRawText(`.msg { color: var(--fs-error); }`)[0].fix).toBe('var(--fs-error-fg)');
     });
 
+    test('raw accent text is caught too, including hover: variants (#5318)', () => {
+      expect(findRawText(`<a class="text-sm text-accent hover:underline">`)[0].fix).toBe('text-accent-fg');
+      expect(findRawText(`<a class="hover:text-accent">`)).toHaveLength(1);
+      expect(findRawText(`.pending { color: var(--fs-accent); }`)[0].fix).toBe('var(--fs-accent-fg)');
+      expect(findRawText(`<a class="text-accent-fg border-accent">`)).toEqual([]);
+    });
+
     test('passes error-fg, and error as a border or outline', () => {
       expect(findRawText(`<p class="text-error-fg">x</p>`)).toEqual([]);
       expect(findRawText(`<div class="border-error" class:border-error={bad}>`)).toEqual([]);

web/src/lib/components/AlphabeticalGrid.svelte

@@ -201,7 +201,7 @@
     cursor: default;
   }
   .rail-btn.pending {
-    color: var(--fs-accent);
+    color: var(--fs-accent-fg);
     cursor: wait;
   }
   :global(.rail-btn .spin) {

web/src/lib/components/LikeButton.svelte

@@ -44,5 +44,5 @@
   aria-label={liked ? 'Unlike' : 'Like'}
   aria-pressed={liked}
   onclick={onClick}
-  class="rounded p-1 {sizeClass} {liked ? 'text-accent' : 'text-text-secondary hover:text-text-primary'}"
+  class="rounded p-1 {sizeClass} {liked ? 'text-accent-fg' : 'text-text-secondary hover:text-text-primary'}"
 >{liked ? '♥' : '♡'}</button>

web/src/lib/components/MobileAppDownload.svelte

@@ -48,9 +48,9 @@
     <a
       href={info.apkUrl}
       download="minstrel.apk"
-      class="mobile-app-download flex items-center gap-3 rounded-md border border-border bg-surface px-3 py-2 text-sm text-text-primary no-underline transition-colors hover:bg-surface-hover hover:text-accent focus-visible:ring-2 focus-visible:ring-accent"
+      class="mobile-app-download flex items-center gap-3 rounded-md border border-border bg-surface px-3 py-2 text-sm text-text-primary no-underline transition-colors hover:bg-surface-hover hover:text-accent-fg focus-visible:ring-2 focus-visible:ring-accent"
     >
-      <Smartphone size={18} strokeWidth={1.5} class="shrink-0 text-accent" />
+      <Smartphone size={18} strokeWidth={1.5} class="shrink-0 text-accent-fg" />
       <span class="flex flex-col leading-tight">
         <span class="font-medium">Get the Android app</span>
         <span class="text-xs text-text-secondary">

web/src/lib/components/QueueTrackRow.svelte

@@ -101,7 +101,7 @@
   >
     <div class="flex items-center gap-2 min-w-0">
       {#if isCurrent}
-        <span class="text-xs text-accent uppercase tracking-wide flex-shrink-0">Now playing</span>
+        <span class="text-xs text-accent-fg uppercase tracking-wide flex-shrink-0">Now playing</span>
       {/if}
       <span class="font-medium truncate text-text-primary">{track.title}</span>
     </div>

web/src/routes/admin/+page.svelte

@@ -290,7 +290,7 @@
     <header class="flex items-baseline justify-between">
       <h3 class="font-display text-xl font-medium text-text-primary">Pending requests</h3>
       {#if pendingCount > PREVIEW_LIMIT}
-        <a href="/admin/requests" class="text-sm text-accent hover:underline">View all {pendingCount} →</a>
+        <a href="/admin/requests" class="text-sm text-accent-fg hover:underline">View all {pendingCount} →</a>
       {/if}
     </header>
 
@@ -523,7 +523,7 @@
     <header class="flex items-baseline justify-between">
       <h3 class="font-display text-xl font-medium text-text-primary">Quarantine</h3>
       {#if quarantineCount > PREVIEW_LIMIT}
-        <a href="/admin/quarantine" class="text-sm text-accent hover:underline">View all {quarantineCount} →</a>
+        <a href="/admin/quarantine" class="text-sm text-accent-fg hover:underline">View all {quarantineCount} →</a>
       {/if}
     </header>
 

web/src/routes/admin/integrations/+page.svelte

@@ -424,7 +424,7 @@
     <div>
       <h3 class="font-display text-lg font-medium text-text-primary">Lidarr</h3>
       <p class="mt-1 text-sm text-text-secondary">
-        Search Lidarr from <span class="font-mono text-accent">/discover</span> and
+        Search Lidarr from <span class="font-mono text-accent-fg">/discover</span> and
         route approved requests to it.
       </p>
     </div>

web/src/routes/admin/requests/+page.svelte

@@ -225,7 +225,7 @@
               {rowMeta(r)}
             </div>
             {#if r.imported_album_count > 0 || r.imported_track_count > 0}
-              <div class="text-sm text-accent" data-testid="ingest-progress">
+              <div class="text-sm text-accent-fg" data-testid="ingest-progress">
                 {#if r.kind === 'artist'}
                   {r.imported_album_count} {r.imported_album_count === 1 ? 'album' : 'albums'}
                   · {r.imported_track_count} {r.imported_track_count === 1 ? 'track' : 'tracks'} ingested

web/src/routes/admin/tuning/+page.svelte

@@ -495,7 +495,7 @@
                   {/each}
                   {#if s.points.length > 1}
                     <polyline
-                      class="text-accent"
+                      class="text-accent-fg"
                       points={sparkPoints(s)}
                       fill="none"
                       stroke="currentColor"
@@ -503,7 +503,7 @@
                     />
                   {:else if s.points.length === 1}
                     <circle
-                      class="text-accent"
+                      class="text-accent-fg"
                       cx={xFor(s.points[0].week_start)}
                       cy={SPARK_H - s.points[0].skip_rate * SPARK_H}
                       r="2" fill="currentColor"

web/src/routes/albums/[id]/+page.svelte

@@ -95,7 +95,7 @@
   {#if notFound}
     <div role="alert" class="rounded border border-border bg-surface p-4">
       <p>Album not found.</p>
-      <a href="/" class="mt-2 inline-block text-sm text-accent">Back to Library</a>
+      <a href="/" class="mt-2 inline-block text-sm text-accent-fg">Back to Library</a>
     </div>
   {:else if query.isError}
     <ApiErrorBanner error={query.error} onRetry={query.refetch} />
@@ -131,7 +131,7 @@
              in that genre. -->
         {#if album.year}
           <p class="text-sm">
-            <a href={`/library/years?y=${album.year}`} class="text-accent hover:underline">
+            <a href={`/library/years?y=${album.year}`} class="text-accent-fg hover:underline">
               {album.year}
             </a>
           </p>

web/src/routes/artists/[id]/+page.svelte

@@ -73,7 +73,7 @@
   {#if notFound}
     <div role="alert" class="rounded border border-border bg-surface p-4">
       <p>Artist not found.</p>
-      <a href="/" class="mt-2 inline-block text-sm text-accent">Back to Library</a>
+      <a href="/" class="mt-2 inline-block text-sm text-accent-fg">Back to Library</a>
     </div>
   {:else if query.isError}
     <ApiErrorBanner error={query.error} onRetry={query.refetch} />

web/src/routes/forgot-password/+page.svelte

@@ -71,7 +71,7 @@
     {/if}
 
     <p class="mt-4 text-center text-sm text-text-secondary">
-      Remembered? <a href="/login" class="text-accent hover:underline">Log in</a>
+      Remembered? <a href="/login" class="text-accent-fg hover:underline">Log in</a>
     </p>
   </div>
 </main>

web/src/routes/library/albums/+page.svelte

@@ -65,7 +65,7 @@
     <p class="text-text-secondary">
       No albums in your loaded library match
       <span class="font-medium">'{filter.trim()}'</span>.
-      <a href={`/search/albums?q=${encodeURIComponent(filter.trim())}`} class="text-accent hover:underline">
+      <a href={`/search/albums?q=${encodeURIComponent(filter.trim())}`} class="text-accent-fg hover:underline">
         Search the full library →
       </a>
     </p>

web/src/routes/library/artists/+page.svelte

@@ -63,7 +63,7 @@
     <p class="text-text-secondary">
       No artists in your loaded library match
       <span class="font-medium">'{filter.trim()}'</span>.
-      <a href={`/search/artists?q=${encodeURIComponent(filter.trim())}`} class="text-accent hover:underline">
+      <a href={`/search/artists?q=${encodeURIComponent(filter.trim())}`} class="text-accent-fg hover:underline">
         Search the full library →
       </a>
     </p>

web/src/routes/library/genres/+page.svelte

@@ -112,7 +112,7 @@
     <header class="space-y-2">
       <a
         href="/library/genres"
-        class="inline-flex items-center gap-1 text-sm text-accent hover:underline"
+        class="inline-flex items-center gap-1 text-sm text-accent-fg hover:underline"
       >
         <ChevronLeft size={14} aria-hidden="true" />
         All genres

web/src/routes/library/liked/+page.svelte

@@ -89,7 +89,7 @@
         title="No liked artists yet."
       >
         {#snippet actions()}
-          <a href="/library/artists" class="text-accent hover:underline">Browse artists →</a>
+          <a href="/library/artists" class="text-accent-fg hover:underline">Browse artists →</a>
         {/snippet}
       </EmptyState>
     {:else}
@@ -121,7 +121,7 @@
         title="No liked albums yet."
       >
         {#snippet actions()}
-          <a href="/library/albums" class="text-accent hover:underline">Browse albums →</a>
+          <a href="/library/albums" class="text-accent-fg hover:underline">Browse albums →</a>
         {/snippet}
       </EmptyState>
     {:else}
@@ -153,7 +153,7 @@
         title="No liked tracks yet."
       >
         {#snippet actions()}
-          <a href="/" class="text-accent hover:underline">Find something new →</a>
+          <a href="/" class="text-accent-fg hover:underline">Find something new →</a>
         {/snippet}
       </EmptyState>
     {:else}

web/src/routes/library/years/+page.svelte

@@ -97,7 +97,7 @@
     <header class="space-y-2">
       <a
         href="/library/years"
-        class="inline-flex items-center gap-1 text-sm text-accent hover:underline"
+        class="inline-flex items-center gap-1 text-sm text-accent-fg hover:underline"
       >
         <ChevronLeft size={14} aria-hidden="true" />
         All years

web/src/routes/login/+page.svelte

@@ -85,11 +85,11 @@
     </form>
 
     <p class="mt-4 text-center text-sm text-text-secondary">
-      <a href="/forgot-password" class="text-accent hover:underline">Forgot password?</a>
+      <a href="/forgot-password" class="text-accent-fg hover:underline">Forgot password?</a>
     </p>
     <p class="mt-2 text-center text-sm text-text-secondary">
       Don't have an account?
-      <a href="/register" class="text-accent hover:underline">Register</a>
+      <a href="/register" class="text-accent-fg hover:underline">Register</a>
     </p>
   </div>
 </main>

web/src/routes/now-playing/+page.svelte

@@ -163,7 +163,7 @@
           aria-label="Shuffle"
           aria-pressed={player.shuffle}
           class="flex items-center justify-center min-h-[44px] min-w-[44px] rounded
-                 {player.shuffle ? 'text-accent' : 'text-text-secondary hover:text-text-primary'}
+                 {player.shuffle ? 'text-accent-fg' : 'text-text-secondary hover:text-text-primary'}
                  focus-visible:ring-2 focus-visible:ring-accent"
         >
           <Shuffle size={20} strokeWidth={1.5} />
@@ -216,7 +216,7 @@
           aria-label={repeatLabel}
           aria-pressed={player.repeat !== 'off'}
           class="flex items-center justify-center min-h-[44px] min-w-[44px] rounded
-                 {player.repeat !== 'off' ? 'text-accent' : 'text-text-secondary hover:text-text-primary'}
+                 {player.repeat !== 'off' ? 'text-accent-fg' : 'text-text-secondary hover:text-text-primary'}
                  focus-visible:ring-2 focus-visible:ring-accent"
         >
           {#if player.repeat === 'one'}

web/src/routes/register/+page.svelte

@@ -170,7 +170,7 @@
 
     <p class="mt-4 text-center text-sm text-text-secondary">
       Already have an account?
-      <a href="/login" class="text-accent hover:underline">Sign in</a>
+      <a href="/login" class="text-accent-fg hover:underline">Sign in</a>
     </p>
   </div>
 </main>

web/src/routes/requests/+page.svelte

@@ -107,7 +107,7 @@
               {rowMeta(r)}
             </div>
             {#if r.imported_album_count > 0 || r.imported_track_count > 0}
-              <div class="text-sm text-accent" data-testid="ingest-progress">
+              <div class="text-sm text-accent-fg" data-testid="ingest-progress">
                 {#if r.kind === 'artist'}
                   {r.imported_album_count} {r.imported_album_count === 1 ? 'album' : 'albums'}
                   · {r.imported_track_count} {r.imported_track_count === 1 ? 'track' : 'tracks'} ingested
@@ -139,7 +139,7 @@
               <a
                 {href}
                 aria-label={`Listen to ${rowAccessibleName(r)}`}
-                class="inline-flex items-center gap-1 text-sm text-accent hover:underline"
+                class="inline-flex items-center gap-1 text-sm text-accent-fg hover:underline"
               >
                 <Music2 size={16} strokeWidth={1} /> Listen
               </a>

web/src/routes/reset-password/[token]/+page.svelte

@@ -89,7 +89,7 @@
       </button>
     </form>
     <p class="mt-4 text-center text-sm text-text-secondary">
-      <a href="/login" class="text-accent hover:underline">Back to login</a>
+      <a href="/login" class="text-accent-fg hover:underline">Back to login</a>
     </p>
   </div>
 </main>

web/src/routes/search/+page.svelte

@@ -56,7 +56,7 @@
           {#if artists.total > artists.items.length}
             <a
               href={`/search/artists?q=${encodeURIComponent(q)}`}
-              class="text-sm text-accent hover:underline"
+              class="text-sm text-accent-fg hover:underline"
             >
               See all {artists.total} →
             </a>
@@ -77,7 +77,7 @@
           {#if albums.total > albums.items.length}
             <a
               href={`/search/albums?q=${encodeURIComponent(q)}`}
-              class="text-sm text-accent hover:underline"
+              class="text-sm text-accent-fg hover:underline"
             >
               See all {albums.total} →
             </a>
@@ -98,7 +98,7 @@
           {#if tracks.total > tracks.items.length}
             <a
               href={`/search/tracks?q=${encodeURIComponent(q)}`}
-              class="text-sm text-accent hover:underline"
+              class="text-sm text-accent-fg hover:underline"
             >
               See all {tracks.total} →
             </a>

web/src/routes/settings/+page.svelte

@@ -363,7 +363,7 @@
               <button
                 type="button"
                 onclick={clearToken}
-                class="text-sm text-accent hover:underline"
+                class="text-sm text-accent-fg hover:underline"
                 disabled={$tokenMutation.isPending}
               >clear</button>
             </div>
@@ -402,7 +402,7 @@
         {/if}
 
         <p class="text-xs text-text-secondary">
-          Get a token at <a href="https://listenbrainz.org/profile/" target="_blank" rel="noopener" class="text-accent hover:underline">listenbrainz.org/profile</a>.
+          Get a token at <a href="https://listenbrainz.org/profile/" target="_blank" rel="noopener" class="text-accent-fg hover:underline">listenbrainz.org/profile</a>.
           Tokens are stored unencrypted in this server's database — treat as sensitive.
         </p>
       </div>
@@ -682,7 +682,7 @@
     <h2 class="text-lg font-semibold">Library</h2>
     <ul class="space-y-2 text-sm">
       <li>
-        <a href="/library/hidden" class="text-accent hover:underline">Hidden tracks</a>
+        <a href="/library/hidden" class="text-accent-fg hover:underline">Hidden tracks</a>
         <span class="text-text-secondary"> — tracks you've flagged as bad rips, wrong tags, or otherwise unplayable.</span>
       </li>
     </ul>

web/tailwind.config.js

@@ -26,8 +26,10 @@ export default {
         accent: {
           DEFAULT: 'var(--fs-accent)',
           tint: 'color-mix(in srgb, var(--fs-accent) 12%, transparent)',
-          // Accent TEXT on an accent tint (#3150). The raw accent on its own
+          // All accent TEXT and icons use this, on a tint or not (#3150,
-          // tint measures 1.97:1 at worst; this measures 5.03.
+          // #5318). The raw accent measures 1.97:1 on its own tint and 2.21 on
+          // slate at worst; this measures 5.03 and 5.62. The raw accent stays
+          // for borders, rings and fills, where it is a graphic, not text.
           fg: 'var(--fs-accent-fg)'
         },
         warning: { DEFAULT: 'var(--fs-warning)', fg: 'var(--fs-warning-fg)' },