adjusted colors just ONE MORE TIME

app/(home-pages)/home/LeafletList/LeafletListItem.tsx

···
         >
           <SpeedyLink
             href={`/${tokenId}`}
-            className={`absolute w-full h-full top-0 left-0 no-underline hover:no-underline! text-primary`}
+            className={`absolute w-full h-full top-0 left-0 no-underline! hover:no-underline! text-primary`}
           />
           {props.showPreview && <LeafletListPreview isVisible={isOnScreen} />}
           <LeafletInfo

components/ThemeManager/PublicationThemeProvider.tsx

···
 import { useMemo, useState } from "react";
 import { parseColor } from "react-aria-components";
 import { useEntity } from "src/replicache";
-import { getColorDifference } from "./themeUtils";
 import { useColorAttribute, colorToString } from "./useColorAttribute";
 import { BaseThemeProvider, CardBorderHiddenContext } from "./ThemeProvider";
 import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api";

components/ThemeManager/ThemeProvider.tsx

···
   PublicationBackgroundProvider,
   PublicationThemeProvider,
 } from "./PublicationThemeProvider";
-import { getColorDifference } from "./themeUtils";
+import { compareColors } from "./themeUtils";
 import {
   getFontConfig,
   getGoogleFontsUrl,
···
     !showPageBackground && !hasBackgroundImage ? bgLeaflet : bgPageProp;
 
   let accentContrast;
+  let bgRef = colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb");
+  let primaryStr = colorToString(primary, "rgb");
+
   let sortedAccents = [accent1, accent2].sort((a, b) => {
     // sort accents by contrast against the background
     return (
-      getColorDifference(
-        colorToString(b, "rgb"),
-        colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
-      ) -
-      getColorDifference(
-        colorToString(a, "rgb"),
-        colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
-      )
+      compareColors(colorToString(b, "rgb"), bgRef).distance -
+      compareColors(colorToString(a, "rgb"), bgRef).distance
     );
   });
+
+  let bestVsText = compareColors(
+    colorToString(sortedAccents[0], "rgb"),
+    primaryStr,
+  );
+  let altVsBg = compareColors(colorToString(sortedAccents[1], "rgb"), bgRef);
+
   if (
     // if the contrast-y accent is too similar to text color
-    getColorDifference(
-      colorToString(sortedAccents[0], "rgb"),
-      colorToString(primary, "rgb"),
-    ) < 0.15 &&
+    // (close in distance AND not distinguishable by hue/chroma)
+    bestVsText.distance < 0.15 &&
+    bestVsText.chromaDiff < 0.05 &&
     // and if the other accent is different enough from the background
-    getColorDifference(
-      colorToString(sortedAccents[1], "rgb"),
-      colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
-    ) > 0.31
+    altVsBg.distance > 0.31
   ) {
     //then choose the less contrast-y accent
     accentContrast = sortedAccents[1];
···
     accentContrast = sortedAccents[0];
   }
 
-  // Check if the final accent contrast color is very similar to the text color
+  // Check if the accent contrast color is visually similar to the text color.
+  // We check both overall OKLab distance AND chroma (hue/saturation) difference
+  // because dark colors are compressed in OKLab lightness — a dark blue accent
+  // vs black text can have a small OKLab distance yet be clearly distinguishable
+  // by hue. If the chroma difference is significant, the colors are visually
+  // distinct and don't need an underline to tell them apart.
+  let accentVsText = compareColors(
+    colorToString(accentContrast, "rgb"),
+    primaryStr,
+  );
   let accentContrastSimilarToText =
-    getColorDifference(
-      colorToString(accentContrast, "rgb"),
-      colorToString(primary, "rgb"),
-    ) < 0.2;
+    accentVsText.distance < 0.45 && accentVsText.chromaDiff < 0.05;
 
   // Get font configs for CSS variables.
   // When using the default font (Quattro), use var(--font-quattro) which is
···
   let accentContrast =
     bgPage && accent1 && accent2
       ? [accent1, accent2].sort((a, b) => {
+          let bgStr = colorToString(bgPage, "rgb");
           return (
-            getColorDifference(
-              colorToString(b, "rgb"),
-              colorToString(bgPage, "rgb"),
-            ) -
-            getColorDifference(
-              colorToString(a, "rgb"),
-              colorToString(bgPage, "rgb"),
-            )
+            compareColors(colorToString(b, "rgb"), bgStr).distance -
+            compareColors(colorToString(a, "rgb"), bgStr).distance
           );
         })[0]
       : null;

components/ThemeManager/themeUtils.ts

···
-import { parse, ColorSpace, sRGB, distance, OKLab } from "colorjs.io/fn";
+import { parse, ColorSpace, sRGB, distance, OKLab, to } from "colorjs.io/fn";
 
 // define the color defaults for everything
 export const ThemeDefaults = {
···
   "theme/accent-contrast": "#57822B",
 };
 
-// used to calculate the contrast between page and accent1, accent2, and determin which is higher contrast
-export function getColorDifference(color1: string, color2: string) {
+// Compares two RGB color strings in OKLab space and returns both the overall
+// perceptual distance and the chroma (hue/saturation) difference.
+//
+// Why both? Dark colors are compressed in OKLab lightness, so two colors can
+// have a small overall distance yet be clearly distinguishable by hue (e.g.
+// dark blue vs black). Checking chromaDiff lets callers tell apart "two
+// similar grays" from "a dark chromatic color next to a gray/black".
+export function compareColors(color1: string, color2: string) {
   ColorSpace.register(sRGB);
   ColorSpace.register(OKLab);
 
   let parsedColor1 = parse(`rgb(${color1})`);
   let parsedColor2 = parse(`rgb(${color2})`);
 
-  return distance(parsedColor1, parsedColor2, "oklab");
+  let [, a1, b1] = to(parsedColor1, "oklab").coords;
+  let [, a2, b2] = to(parsedColor2, "oklab").coords;
+
+  return {
+    distance: distance(parsedColor1, parsedColor2, "oklab"),
+    chromaDiff: Math.sqrt((a1 - a2) ** 2 + (b1 - b2) ** 2),
+  };
 }