From 5a1fa26b340df0c79a1f30800696e657d21d2b7a Mon Sep 17 00:00:00 2001
From: Smyile <84925446+xsmyile@users.noreply.github.com>
Date: Wed, 7 Oct 2026 00:37:51 +0200
Subject: [PATCH 1/3] fix: raise contrast of tertiary text to WCAG AA

---
 ui/src/components/DetailRail.tsx    | 36 ++++++++++++++---------------
 ui/src/components/FilterBar.tsx     | 20 ++++++++--------
 ui/src/components/Header.tsx        |  2 +-
 ui/src/components/Inbox.tsx         | 12 +++++-----
 ui/src/components/MessageDetail.tsx |  6 ++---
 ui/src/components/PaneRead.tsx      |  2 +-
 ui/src/components/Settings.tsx      |  2 +-
 ui/src/components/StatusBar.tsx     |  6 ++---
 ui/src/components/UndoToast.tsx     |  2 +-
 9 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/ui/src/components/DetailRail.tsx b/ui/src/components/DetailRail.tsx
index 0e8fe77..669b03a 100644
--- a/ui/src/components/DetailRail.tsx
+++ b/ui/src/components/DetailRail.tsx
@@ -94,7 +94,7 @@ function Section(props: {
   return (
     <section class="px-4 py-3.5">
       <div class="flex items-center justify-between gap-2 mb-2 min-h-5">
-        <h3 class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
+        <h3 class="text-[10px] font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400">
           {props.label}
         </h3>
         {props.aside}
@@ -159,7 +159,7 @@ export default function DetailRail(props: {
         <Show
           when={props.headersOpen}
           fallback={
-            <p class="text-xs text-zinc-400 dark:text-zinc-500">
+            <p class="text-xs text-zinc-500 dark:text-zinc-400">
               Every header the message carries, as received.
             </p>
           }
@@ -185,23 +185,23 @@ export default function DetailRail(props: {
 function SummaryList(props: { message: Message }) {
   return (
     <dl class="grid grid-cols-[3.25rem_minmax(0,1fr)] gap-x-3 gap-y-2 text-xs">
-      <dt class="text-zinc-400 dark:text-zinc-500">From</dt>
+      <dt class="text-zinc-500 dark:text-zinc-400">From</dt>
       <dd class="text-zinc-800 dark:text-zinc-200 break-all">
         {props.message.sender || "(no sender)"}
       </dd>
-      <dt class="text-zinc-400 dark:text-zinc-500">To</dt>
+      <dt class="text-zinc-500 dark:text-zinc-400">To</dt>
       <dd class="text-zinc-800 dark:text-zinc-200 break-all">
         <For each={props.message.recipients}>{(r) => <div>{r}</div>}</For>
       </dd>
-      <dt class="text-zinc-400 dark:text-zinc-500">Date</dt>
+      <dt class="text-zinc-500 dark:text-zinc-400">Date</dt>
       <dd class="text-zinc-800 dark:text-zinc-200">
         {formatDateTime(props.message.created_at)}
       </dd>
-      <dt class="text-zinc-400 dark:text-zinc-500">Size</dt>
+      <dt class="text-zinc-500 dark:text-zinc-400">Size</dt>
       <dd class="text-zinc-800 dark:text-zinc-200">
         {formatSize(props.message.size)}
       </dd>
-      <dt class="text-zinc-400 dark:text-zinc-500 pt-0.5">Tags</dt>
+      <dt class="text-zinc-500 dark:text-zinc-400 pt-0.5">Tags</dt>
       <dd>
         <TagEditor message={props.message} />
       </dd>
@@ -224,7 +224,7 @@ function AuthList(props: { results: AuthResults }) {
     <Show
       when={!isEmpty()}
       fallback={
-        <div class="text-xs text-zinc-400 dark:text-zinc-500">
+        <div class="text-xs text-zinc-500 dark:text-zinc-400">
           <p>No authentication headers found.</p>
           <p class="mt-1">
             DKIM, SPF, and DMARC headers are typically added by receiving mail
@@ -279,7 +279,7 @@ function AttachmentsSection(props: {
       aside={
         <Show when={props.files}>
           {(list) => (
-            <span class="text-[11px] tabular-nums text-zinc-400 dark:text-zinc-500">
+            <span class="text-[11px] tabular-nums text-zinc-500 dark:text-zinc-400">
               {list().length}
             </span>
           )}
@@ -300,7 +300,7 @@ function AttachmentsSection(props: {
           <Show
             when={list().length > 0}
             fallback={
-              <p class="text-xs text-zinc-400 dark:text-zinc-500">
+              <p class="text-xs text-zinc-500 dark:text-zinc-400">
                 No attachments
               </p>
             }
@@ -320,7 +320,7 @@ function AttachmentsSection(props: {
                       </span>
                       <Show when={att.size}>
                         {(size) => (
-                          <span class="shrink-0 tabular-nums text-zinc-400 dark:text-zinc-500">
+                          <span class="shrink-0 tabular-nums text-zinc-500 dark:text-zinc-400">
                             {formatSize(size())}
                           </span>
                         )}
@@ -364,7 +364,7 @@ function LinksSection(props: { message: Message }) {
     <Section
       label="Links"
       aside={
-        <span class="text-[11px] tabular-nums text-zinc-400 dark:text-zinc-500">
+        <span class="text-[11px] tabular-nums text-zinc-500 dark:text-zinc-400">
           {links().length}
         </span>
       }
@@ -372,7 +372,7 @@ function LinksSection(props: { message: Message }) {
       <Show
         when={links().length > 0}
         fallback={
-          <p class="text-xs text-zinc-400 dark:text-zinc-500">No links</p>
+          <p class="text-xs text-zinc-500 dark:text-zinc-400">No links</p>
         }
       >
         <ul class="-mx-2 space-y-0.5">
@@ -441,11 +441,11 @@ function LinkRow(props: { link: MessageLink }) {
             <span class="min-w-0 shrink truncate font-mono text-zinc-700 dark:text-zinc-300">
               {props.link.host}
             </span>
-            <span class="min-w-0 flex-1 truncate text-zinc-400 dark:text-zinc-500">
+            <span class="min-w-0 flex-1 truncate text-zinc-500 dark:text-zinc-400">
               {props.link.path}
             </span>
             <Show when={props.link.count > 1}>
-              <span class="shrink-0 tabular-nums text-zinc-400 dark:text-zinc-500">
+              <span class="shrink-0 tabular-nums text-zinc-500 dark:text-zinc-400">
                 ×{props.link.count}
               </span>
             </Show>
@@ -457,7 +457,7 @@ function LinkRow(props: { link: MessageLink }) {
             </Show>
           </span>
           <Show when={props.link.text}>
-            <span class="mt-0.5 block truncate text-[11px] text-zinc-400 dark:text-zinc-500">
+            <span class="mt-0.5 block truncate text-[11px] text-zinc-500 dark:text-zinc-400">
               {props.link.text}
             </span>
           </Show>
@@ -482,7 +482,7 @@ function LinkRow(props: { link: MessageLink }) {
           <span ref={fullHref} class="font-mono break-all">
             {props.link.href}
           </span>
-          <span class="block text-zinc-400 dark:text-zinc-500">
+          <span class="block text-zinc-500 dark:text-zinc-400">
             {MANUAL_COPY_HINT}
           </span>
         </p>
@@ -568,7 +568,7 @@ function TagEditor(props: { message: MessageSummary }) {
             removeTag(tags()[tags().length - 1]);
           }
         }}
-        class="bg-transparent text-xs text-zinc-700 dark:text-zinc-300 placeholder-zinc-400 dark:placeholder-zinc-600 outline-none min-w-[80px] flex-1 rounded-md px-1.5 py-0.5 transition focus:bg-zinc-100 dark:focus:bg-zinc-800/60"
+        class="bg-transparent text-xs text-zinc-700 dark:text-zinc-300 placeholder-zinc-500 dark:placeholder-zinc-400 outline-none min-w-[80px] flex-1 rounded-md px-1.5 py-0.5 transition focus:bg-zinc-100 dark:focus:bg-zinc-800/60"
       />
     </div>
   );
diff --git a/ui/src/components/FilterBar.tsx b/ui/src/components/FilterBar.tsx
index 5ca30b5..2b7869a 100644
--- a/ui/src/components/FilterBar.tsx
+++ b/ui/src/components/FilterBar.tsx
@@ -31,7 +31,7 @@ function Chip(props: {
       class={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-medium border transition-colors cursor-pointer select-none ${
         props.active
           ? props.activeClass
-          : "bg-zinc-100 dark:bg-zinc-800/50 text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700/50 hover:bg-zinc-200 dark:hover:bg-zinc-700/50 hover:text-zinc-600 dark:hover:text-zinc-400"
+          : "bg-zinc-100 dark:bg-zinc-800/50 text-zinc-600 dark:text-zinc-400 border-zinc-200 dark:border-zinc-700/50 hover:bg-zinc-200 dark:hover:bg-zinc-700/50 hover:text-zinc-700 dark:hover:text-zinc-300"
       }`}
     >
       <Show when={props.icon}>
@@ -111,7 +111,7 @@ function TagDropdown() {
         class={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-medium border transition-colors cursor-pointer select-none ${
           filters().tags.length > 0
             ? "bg-orange-50 dark:bg-orange-500/15 text-orange-600 dark:text-orange-400 border-orange-200 dark:border-orange-500/30"
-            : "bg-zinc-100 dark:bg-zinc-800/50 text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700/50 hover:bg-zinc-200 dark:hover:bg-zinc-700/50 hover:text-zinc-600 dark:hover:text-zinc-400"
+            : "bg-zinc-100 dark:bg-zinc-800/50 text-zinc-600 dark:text-zinc-400 border-zinc-200 dark:border-zinc-700/50 hover:bg-zinc-200 dark:hover:bg-zinc-700/50 hover:text-zinc-700 dark:hover:text-zinc-300"
         }`}
       >
         <svg
@@ -163,7 +163,7 @@ function TagDropdown() {
             <Show
               when={allTags().length > 0}
               fallback={
-                <div class="px-3 py-4 text-xs text-zinc-400 dark:text-zinc-500 text-center">
+                <div class="px-3 py-4 text-xs text-zinc-500 dark:text-zinc-400 text-center">
                   No tags yet
                 </div>
               }
@@ -176,7 +176,7 @@ function TagDropdown() {
                     value={tagQuery()}
                     onInput={(e) => setTagQuery(e.currentTarget.value)}
                     placeholder="Filter tags..."
-                    class="w-full rounded-md border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2 py-1 text-xs text-zinc-700 dark:text-zinc-300 placeholder-zinc-400 dark:placeholder-zinc-500 outline-none focus:border-zinc-400 dark:focus:border-zinc-600"
+                    class="w-full rounded-md border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2 py-1 text-xs text-zinc-700 dark:text-zinc-300 placeholder-zinc-500 dark:placeholder-zinc-400 outline-none focus:border-zinc-400 dark:focus:border-zinc-600"
                   />
                 </div>
               </Show>
@@ -184,7 +184,7 @@ function TagDropdown() {
                 <Show
                   when={visibleTags().length > 0}
                   fallback={
-                    <div class="px-3 py-3 text-xs text-zinc-400 dark:text-zinc-500 text-center">
+                    <div class="px-3 py-3 text-xs text-zinc-500 dark:text-zinc-400 text-center">
                       No matching tags
                     </div>
                   }
@@ -237,7 +237,7 @@ function TagDropdown() {
                 </Show>
               </div>
               <Show when={tagFiltersFull()}>
-                <div class="border-t border-zinc-100 dark:border-zinc-800 px-3 py-1.5 text-[11px] text-zinc-400 dark:text-zinc-500">
+                <div class="border-t border-zinc-100 dark:border-zinc-800 px-3 py-1.5 text-[11px] text-zinc-500 dark:text-zinc-400">
                   Up to {MAX_TAG_FILTERS} tags at a time
                 </div>
               </Show>
@@ -248,7 +248,7 @@ function TagDropdown() {
                       clearTagFilters();
                       setOpen(false);
                     }}
-                    class="text-[11px] text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition cursor-pointer"
+                    class="text-[11px] text-zinc-500 dark:text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition cursor-pointer"
                   >
                     Reset tags
                   </button>
@@ -294,7 +294,7 @@ export default function FilterBar() {
           placeholder="Search emails..."
           value={search()}
           onInput={(e) => onSearchInput(e.currentTarget.value)}
-          class="w-full rounded-md border border-zinc-200 dark:border-zinc-700/60 bg-zinc-50 dark:bg-zinc-950/40 pl-8 pr-3 py-1.5 text-sm text-zinc-800 dark:text-zinc-200 placeholder-zinc-400 dark:placeholder-zinc-500 outline-none focus:border-zinc-400 dark:focus:border-zinc-500 transition"
+          class="w-full rounded-md border border-zinc-200 dark:border-zinc-700/60 bg-zinc-50 dark:bg-zinc-950/40 pl-8 pr-3 py-1.5 text-sm text-zinc-800 dark:text-zinc-200 placeholder-zinc-500 dark:placeholder-zinc-400 outline-none focus:border-zinc-400 dark:focus:border-zinc-500 transition"
         />
       </label>
 
@@ -323,12 +323,12 @@ export default function FilterBar() {
 
         <Show when={hasActiveFilters()}>
           <div class="ml-auto flex items-center gap-2">
-            <span class="text-[11px] text-zinc-400 dark:text-zinc-600">
+            <span class="text-[11px] text-zinc-500 dark:text-zinc-400">
               {listSize()} {listSize() === 1 ? "match" : "matches"}
             </span>
             <button
               onClick={clearFilters}
-              class="text-[11px] text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition cursor-pointer"
+              class="text-[11px] text-zinc-500 dark:text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition cursor-pointer"
             >
               Clear
             </button>
diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index b4f1ef7..2240996 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -25,7 +25,7 @@ export default function Header() {
         <h1 class="font-brand text-lg font-bold tracking-tight bg-linear-to-r from-orange-500 to-zinc-300 dark:to-white bg-clip-text text-transparent">
           RustMail
         </h1>
-        <span class="text-xs tabular-nums text-zinc-500 dark:text-zinc-500 truncate">
+        <span class="text-xs tabular-nums text-zinc-500 dark:text-zinc-400 truncate">
           {total()} {total() === 1 ? "message" : "messages"}
         </span>
       </div>
diff --git a/ui/src/components/Inbox.tsx b/ui/src/components/Inbox.tsx
index d9b22cd..5bd6768 100644
--- a/ui/src/components/Inbox.tsx
+++ b/ui/src/components/Inbox.tsx
@@ -169,7 +169,7 @@ export default function Inbox() {
         </div>
       </Show>
       <Show when={!loading() && filteredMessages().length === 0}>
-        <div class="flex flex-col items-center justify-center h-full text-zinc-500 dark:text-zinc-500">
+        <div class="flex flex-col items-center justify-center h-full text-zinc-500 dark:text-zinc-400">
           <Show
             when={visibleMessages().length === 0 && !search()}
             fallback={
@@ -213,7 +213,7 @@ export default function Inbox() {
               />
             </svg>
             <p class="text-sm">No messages yet</p>
-            <p class="text-xs mt-1 text-zinc-400 dark:text-zinc-600">
+            <p class="text-xs mt-1 text-zinc-500 dark:text-zinc-400">
               Send an email to the SMTP port to get started
             </p>
           </Show>
@@ -256,7 +256,7 @@ export default function Inbox() {
       </div>
 
       <Show when={loadingMore()}>
-        <div class="py-3 text-center text-xs text-zinc-400 dark:text-zinc-600">
+        <div class="py-3 text-center text-xs text-zinc-500 dark:text-zinc-400">
           Loading…
         </div>
       </Show>
@@ -321,14 +321,14 @@ function MessageRow(props: { msg: Accessor<MessageSummary>; index: number }) {
               {msg().subject || "(no subject)"}
             </span>
             <span
-              class={`text-[11px] leading-4 tabular-nums flex-shrink-0 ${isSelected() ? "text-zinc-600 dark:text-zinc-300" : "text-zinc-400 dark:text-zinc-500"}`}
+              class={`text-[11px] leading-4 tabular-nums flex-shrink-0 ${isSelected() ? "text-zinc-600 dark:text-zinc-300" : "text-zinc-500 dark:text-zinc-400"}`}
             >
               {formatDate(msg().created_at)}
             </span>
           </div>
           <div class="flex items-center gap-1.5 mt-0.5">
             <span
-              class={`text-xs leading-4 truncate min-w-0 ${isSelected() ? "text-zinc-600 dark:text-zinc-300" : "text-zinc-500 dark:text-zinc-500"}`}
+              class={`text-xs leading-4 truncate min-w-0 ${isSelected() ? "text-zinc-600 dark:text-zinc-300" : "text-zinc-500 dark:text-zinc-400"}`}
             >
               {routeLine(msg())}
             </span>
@@ -345,7 +345,7 @@ function MessageRow(props: { msg: Accessor<MessageSummary>; index: number }) {
                   )}
                 </For>
                 <Show when={msg().tags.length > 3}>
-                  <span class="text-[10px] text-zinc-400">
+                  <span class="text-[10px] text-zinc-500 dark:text-zinc-400">
                     +{msg().tags.length - 3}
                   </span>
                 </Show>
diff --git a/ui/src/components/MessageDetail.tsx b/ui/src/components/MessageDetail.tsx
index 0ac5a43..7e163d2 100644
--- a/ui/src/components/MessageDetail.tsx
+++ b/ui/src/components/MessageDetail.tsx
@@ -225,7 +225,7 @@ export default function MessageDetail() {
               <Show
                 when={selectedId()}
                 fallback={
-                  <p class="p-4 text-xs text-zinc-400 dark:text-zinc-500">
+                  <p class="p-4 text-xs text-zinc-500 dark:text-zinc-400">
                     Details of the selected message show here.
                   </p>
                 }
@@ -361,7 +361,7 @@ function MessageHeader(props: { message: Message; reads: RailReads }) {
           <Show when={sender().name}>
             <span> &lt;{sender().address}&gt;</span>
           </Show>
-          <span class="text-zinc-400 dark:text-zinc-500"> {"→"} </span>
+          <span class="text-zinc-500 dark:text-zinc-400"> {"→"} </span>
           {meta()}
         </p>
       </div>
@@ -443,7 +443,7 @@ function SegmentedSwitch<T extends string>(props: {
             classList={{
               "bg-white dark:bg-zinc-700 text-zinc-900 dark:text-zinc-50 shadow-sm":
                 props.value === option.id,
-              "text-zinc-500 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200":
+              "text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200":
                 props.value !== option.id,
             }}
           >
diff --git a/ui/src/components/PaneRead.tsx b/ui/src/components/PaneRead.tsx
index 2419e49..315b098 100644
--- a/ui/src/components/PaneRead.tsx
+++ b/ui/src/components/PaneRead.tsx
@@ -112,7 +112,7 @@ export function ReadState(props: {
         {(drift) => (
           <div class={`${frame()} text-sm text-zinc-500 dark:text-zinc-400`}>
             <p>This page does not match the server it is talking to.</p>
-            <p class="mt-1 font-mono text-xs break-all text-zinc-400 dark:text-zinc-500">
+            <p class="mt-1 font-mono text-xs break-all text-zinc-500 dark:text-zinc-400">
               {drift().message}
             </p>
             <button
diff --git a/ui/src/components/Settings.tsx b/ui/src/components/Settings.tsx
index eddb391..13de711 100644
--- a/ui/src/components/Settings.tsx
+++ b/ui/src/components/Settings.tsx
@@ -52,7 +52,7 @@ export default function Settings() {
               class={`flex items-center gap-1.5 px-3 py-2.5 text-xs font-medium border-b-2 -mb-px transition cursor-pointer ${
                 settingsTab() === tab.value
                   ? "border-orange-500 text-zinc-900 dark:text-zinc-100"
-                  : "border-transparent text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300"
+                  : "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
               }`}
             >
               <svg
diff --git a/ui/src/components/StatusBar.tsx b/ui/src/components/StatusBar.tsx
index 728ed35..f7ca523 100644
--- a/ui/src/components/StatusBar.tsx
+++ b/ui/src/components/StatusBar.tsx
@@ -108,7 +108,7 @@ export default function StatusBar() {
         when={endpoint()}
         fallback={
           <Show when={info.state === "errored"}>
-            <span class="text-zinc-400 dark:text-zinc-500">SMTP unknown</span>
+            <span class="text-zinc-500 dark:text-zinc-400">SMTP unknown</span>
           </Show>
         }
       >
@@ -153,13 +153,13 @@ export default function StatusBar() {
 
       <Show when={ready()}>
         {(server) => (
-          <span class="text-zinc-400 dark:text-zinc-500">
+          <span class="text-zinc-500 dark:text-zinc-400">
             v{server().version}
           </span>
         )}
       </Show>
 
-      <span class="ml-auto inline-flex items-center gap-3 text-zinc-400 dark:text-zinc-500">
+      <span class="ml-auto inline-flex items-center gap-3 text-zinc-500 dark:text-zinc-400">
         <Show when={!wideLayout()}>
           <Hint keys={["i"]} label="details" />
         </Show>
diff --git a/ui/src/components/UndoToast.tsx b/ui/src/components/UndoToast.tsx
index 1035eba..1911418 100644
--- a/ui/src/components/UndoToast.tsx
+++ b/ui/src/components/UndoToast.tsx
@@ -24,7 +24,7 @@ export default function UndoToast() {
           onClick={undoDelete}
           class="text-xs font-medium text-orange-500 hover:text-orange-400 transition cursor-pointer"
         >
-          Undo <span class="text-zinc-400 dark:text-zinc-500">(u)</span>
+          Undo <span class="text-zinc-500 dark:text-zinc-400">(u)</span>
         </button>
       </div>
     </Show>

From 901143bbf2772fec26a4658d3c803657b74bb8e3 Mon Sep 17 00:00:00 2001
From: Smyile <84925446+xsmyile@users.noreply.github.com>
Date: Wed, 7 Oct 2026 01:01:53 +0200
Subject: [PATCH 2/3] fix: raise contrast of the remaining controls to WCAG AA

---
 ui/src/components/DetailRail.tsx    |  6 +++---
 ui/src/components/FilterBar.tsx     |  4 ++--
 ui/src/components/Inbox.tsx         |  4 ++--
 ui/src/components/MessageDetail.tsx |  6 +++---
 ui/src/components/Notices.tsx       |  2 +-
 ui/src/components/Settings.tsx      | 12 ++++++------
 ui/src/components/StatusBar.tsx     |  2 +-
 ui/src/components/UndoToast.tsx     |  2 +-
 ui/src/index.css                    |  2 +-
 9 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/ui/src/components/DetailRail.tsx b/ui/src/components/DetailRail.tsx
index 669b03a..3823643 100644
--- a/ui/src/components/DetailRail.tsx
+++ b/ui/src/components/DetailRail.tsx
@@ -150,7 +150,7 @@ export default function DetailRail(props: {
           <button
             onClick={() => props.onToggleHeaders()}
             aria-expanded={props.headersOpen}
-            class="rounded-md px-1.5 py-0.5 text-[11px] font-medium text-orange-600 dark:text-orange-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
+            class="rounded-md px-1.5 py-0.5 text-[11px] font-medium text-orange-700 dark:text-orange-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
           >
             {props.headersOpen ? "Hide headers" : "Show headers"}
           </button>
@@ -381,7 +381,7 @@ function LinksSection(props: { message: Message }) {
         <Show when={shown().length < links().length}>
           <button
             onClick={() => setExpanded(true)}
-            class="mt-1.5 -ml-1.5 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-orange-600 dark:text-orange-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
+            class="mt-1.5 -ml-1.5 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-orange-700 dark:text-orange-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
           >
             Show all {links().length}
           </button>
@@ -472,7 +472,7 @@ function LinkRow(props: { link: MessageLink }) {
                 : `Copy the link to ${props.link.host}`
           }
           title={feedback() === "copied" ? "Copied" : "Copy"}
-          class="mt-1 shrink-0 rounded p-1 text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
+          class="mt-1 shrink-0 rounded p-1 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
         >
           <CopyIcon class="size-3" />
         </button>
diff --git a/ui/src/components/FilterBar.tsx b/ui/src/components/FilterBar.tsx
index 2b7869a..cde7323 100644
--- a/ui/src/components/FilterBar.tsx
+++ b/ui/src/components/FilterBar.tsx
@@ -110,7 +110,7 @@ function TagDropdown() {
         onClick={() => setOpen(!open())}
         class={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-medium border transition-colors cursor-pointer select-none ${
           filters().tags.length > 0
-            ? "bg-orange-50 dark:bg-orange-500/15 text-orange-600 dark:text-orange-400 border-orange-200 dark:border-orange-500/30"
+            ? "bg-orange-50 dark:bg-orange-500/15 text-orange-700 dark:text-orange-400 border-orange-200 dark:border-orange-500/30"
             : "bg-zinc-100 dark:bg-zinc-800/50 text-zinc-600 dark:text-zinc-400 border-zinc-200 dark:border-zinc-700/50 hover:bg-zinc-200 dark:hover:bg-zinc-700/50 hover:text-zinc-700 dark:hover:text-zinc-300"
         }`}
       >
@@ -303,7 +303,7 @@ export default function FilterBar() {
           label="Starred"
           icon={"\u2605"}
           active={f().starred}
-          activeClass="bg-amber-50 dark:bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-500/30"
+          activeClass="bg-amber-50 dark:bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-500/30"
           onClick={() => toggleFilter("starred")}
         />
         <Chip
diff --git a/ui/src/components/Inbox.tsx b/ui/src/components/Inbox.tsx
index 5bd6768..0f42007 100644
--- a/ui/src/components/Inbox.tsx
+++ b/ui/src/components/Inbox.tsx
@@ -191,7 +191,7 @@ export default function Inbox() {
                 <Show when={hasActiveFilters()}>
                   <button
                     onClick={clearFilters}
-                    class="text-xs mt-2 text-orange-500 hover:text-orange-400 transition cursor-pointer"
+                    class="text-xs mt-2 text-orange-700 hover:text-orange-800 dark:text-orange-500 dark:hover:text-orange-400 transition cursor-pointer"
                   >
                     Clear filters
                   </button>
@@ -308,7 +308,7 @@ function MessageRow(props: { msg: Accessor<MessageSummary>; index: number }) {
             title={msg().is_starred ? "Unstar" : "Star"}
           >
             <StarIcon
-              class={`size-3.5 transition ${msg().is_starred ? "text-amber-400" : "text-zinc-300 dark:text-zinc-600 hover:text-amber-400"}`}
+              class={`size-3.5 transition ${msg().is_starred ? "text-amber-700 dark:text-amber-400" : "text-zinc-500 hover:text-amber-800 dark:hover:text-amber-400"}`}
               filled={msg().is_starred}
             />
           </button>
diff --git a/ui/src/components/MessageDetail.tsx b/ui/src/components/MessageDetail.tsx
index 7e163d2..66189b8 100644
--- a/ui/src/components/MessageDetail.tsx
+++ b/ui/src/components/MessageDetail.tsx
@@ -389,8 +389,8 @@ function MessageHeader(props: { message: Message; reads: RailReads }) {
             onClick={() => starMessage(props.message.id, !starred())}
             class={ACTION_CLASS}
             classList={{
-              "text-amber-400 hover:text-amber-500": starred(),
-              "text-zinc-500 dark:text-zinc-400 hover:text-amber-400":
+              "text-amber-700 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-200": starred(),
+              "text-zinc-500 dark:text-zinc-400 hover:text-amber-800 dark:hover:text-amber-400":
                 !starred(),
             }}
             title={starred() ? "Unstar" : "Star"}
@@ -410,7 +410,7 @@ function MessageHeader(props: { message: Message; reads: RailReads }) {
               setSelectedId(null);
               deleteWithUndo(props.message.id);
             }}
-            class={`${ACTION_CLASS} text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400`}
+            class={`${ACTION_CLASS} text-zinc-500 dark:text-zinc-400 hover:text-red-700 dark:hover:text-red-300`}
             title="Delete"
           >
             <TrashIcon class="size-4" />
diff --git a/ui/src/components/Notices.tsx b/ui/src/components/Notices.tsx
index b8bc8cc..8f004d5 100644
--- a/ui/src/components/Notices.tsx
+++ b/ui/src/components/Notices.tsx
@@ -22,7 +22,7 @@ export default function Notices() {
           <button
             onClick={() => dismissNotice(notice.id)}
             aria-label="Dismiss notice"
-            class="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 transition cursor-pointer"
+            class="text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 transition cursor-pointer"
           >
             <svg
               class="size-3.5"
diff --git a/ui/src/components/Settings.tsx b/ui/src/components/Settings.tsx
index 13de711..d887806 100644
--- a/ui/src/components/Settings.tsx
+++ b/ui/src/components/Settings.tsx
@@ -26,7 +26,7 @@ export default function Settings() {
         <h2 class="text-base font-semibold">Settings</h2>
         <button
           onClick={() => setSettingsOpen(false)}
-          class="rounded-md p-1.5 text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
+          class="rounded-md p-1.5 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
         >
           <svg
             class="size-4"
@@ -94,7 +94,7 @@ function AppearanceTab() {
           onClick={() => setTheme("dark")}
           class={`rounded-lg border px-3 py-2.5 text-xs font-medium transition cursor-pointer flex items-center justify-center gap-2 ${
             theme() === "dark"
-              ? "border-orange-500 bg-orange-500/10 text-orange-500"
+              ? "border-orange-500 bg-orange-500/10 text-orange-700 dark:text-orange-500"
               : "border-zinc-200 dark:border-zinc-700 text-zinc-500 dark:text-zinc-400 hover:border-zinc-300 dark:hover:border-zinc-600"
           }`}
         >
@@ -117,7 +117,7 @@ function AppearanceTab() {
           onClick={() => setTheme("light")}
           class={`rounded-lg border px-3 py-2.5 text-xs font-medium transition cursor-pointer flex items-center justify-center gap-2 ${
             theme() === "light"
-              ? "border-orange-500 bg-orange-500/10 text-orange-500"
+              ? "border-orange-500 bg-orange-500/10 text-orange-700 dark:text-orange-500"
               : "border-zinc-200 dark:border-zinc-700 text-zinc-500 dark:text-zinc-400 hover:border-zinc-300 dark:hover:border-zinc-600"
           }`}
         >
@@ -140,7 +140,7 @@ function AppearanceTab() {
           onClick={() => setTheme("system")}
           class={`rounded-lg border px-3 py-2.5 text-xs font-medium transition cursor-pointer flex items-center justify-center gap-2 ${
             theme() === "system"
-              ? "border-orange-500 bg-orange-500/10 text-orange-500"
+              ? "border-orange-500 bg-orange-500/10 text-orange-700 dark:text-orange-500"
               : "border-zinc-200 dark:border-zinc-700 text-zinc-500 dark:text-zinc-400 hover:border-zinc-300 dark:hover:border-zinc-600"
           }`}
         >
@@ -172,7 +172,7 @@ function AppearanceTab() {
               aria-pressed={palette() === option.id}
               class={`rounded-lg border p-2 text-xs font-medium transition cursor-pointer flex flex-col gap-2 ${
                 palette() === option.id
-                  ? "border-orange-500 bg-orange-500/10 text-orange-500"
+                  ? "border-orange-500 bg-orange-500/10 text-orange-700 dark:text-orange-500"
                   : "border-zinc-200 dark:border-zinc-700 text-zinc-500 dark:text-zinc-400 hover:border-zinc-300 dark:hover:border-zinc-600"
               }`}
             >
@@ -196,7 +196,7 @@ function AppearanceTab() {
         <label class="text-sm font-medium text-zinc-700 dark:text-zinc-300 mt-6 mb-2 block">
           Easter egg
         </label>
-        <div class="rounded-lg border border-orange-500 bg-orange-500/10 px-3 py-2 text-xs font-medium text-orange-500 flex items-center justify-between gap-2">
+        <div class="rounded-lg border border-orange-500 bg-orange-500/10 px-3 py-2 text-xs font-medium text-orange-700 dark:text-orange-500 flex items-center justify-between gap-2">
           <span>Rusted · On</span>
           <button
             type="button"
diff --git a/ui/src/components/StatusBar.tsx b/ui/src/components/StatusBar.tsx
index f7ca523..a17efd3 100644
--- a/ui/src/components/StatusBar.tsx
+++ b/ui/src/components/StatusBar.tsx
@@ -133,7 +133,7 @@ export default function StatusBar() {
                     : "Copy the SMTP address"
               }
               title={feedback() === "copied" ? "Copied" : "Copy"}
-              class="rounded p-0.5 text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
+              class="rounded p-0.5 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition cursor-pointer"
             >
               <CopyIcon class="size-3" />
             </button>
diff --git a/ui/src/components/UndoToast.tsx b/ui/src/components/UndoToast.tsx
index 1911418..27bb64b 100644
--- a/ui/src/components/UndoToast.tsx
+++ b/ui/src/components/UndoToast.tsx
@@ -22,7 +22,7 @@ export default function UndoToast() {
         </span>
         <button
           onClick={undoDelete}
-          class="text-xs font-medium text-orange-500 hover:text-orange-400 transition cursor-pointer"
+          class="text-xs font-medium text-orange-700 hover:text-orange-800 dark:text-orange-500 dark:hover:text-orange-400 transition cursor-pointer"
         >
           Undo <span class="text-zinc-500 dark:text-zinc-400">(u)</span>
         </button>
diff --git a/ui/src/index.css b/ui/src/index.css
index 125412d..7c9fca0 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -401,7 +401,7 @@
 .btn-destructive {
   border-color: var(--color-red-200);
   background-color: var(--color-red-50);
-  color: var(--color-red-600);
+  color: var(--color-red-700);
 }
 .btn-destructive:hover {
   background-color: var(--color-red-100);

From dac9f59d269564820d0287bf735a1ee1424141ea Mon Sep 17 00:00:00 2001
From: Smyile <84925446+xsmyile@users.noreply.github.com>
Date: Wed, 7 Oct 2026 01:11:06 +0200
Subject: [PATCH 3/3] fix: keep tertiary text at WCAG AA on hover and focus
 surfaces

---
 ui/src/components/DetailRail.tsx | 14 +++++++-------
 ui/src/components/Inbox.tsx      |  8 ++++----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/DetailRail.tsx b/ui/src/components/DetailRail.tsx
index 3823643..c93f3e3 100644
--- a/ui/src/components/DetailRail.tsx
+++ b/ui/src/components/DetailRail.tsx
@@ -312,7 +312,7 @@ function AttachmentsSection(props: {
                     <a
                       href={api.attachmentUrl(props.message.id, att.id)}
                       download={att.filename || "attachment"}
-                      class="flex items-center gap-2 rounded-md px-2 py-1.5 text-xs text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition"
+                      class="group/attachment flex items-center gap-2 rounded-md px-2 py-1.5 text-xs text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition"
                     >
                       <PaperclipIcon class="size-3.5 shrink-0 text-zinc-400 dark:text-zinc-500" />
                       <span class="min-w-0 flex-1 truncate">
@@ -320,7 +320,7 @@ function AttachmentsSection(props: {
                       </span>
                       <Show when={att.size}>
                         {(size) => (
-                          <span class="shrink-0 tabular-nums text-zinc-500 dark:text-zinc-400">
+                          <span class="shrink-0 tabular-nums text-zinc-500 group-hover/attachment:text-zinc-600 dark:text-zinc-400 dark:group-hover/attachment:text-zinc-400">
                             {formatSize(size())}
                           </span>
                         )}
@@ -435,17 +435,17 @@ function LinkRow(props: { link: MessageLink }) {
           target="_blank"
           rel="noopener noreferrer"
           title={props.link.href}
-          class="min-w-0 flex-1 rounded-md px-2 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition"
+          class="group/link min-w-0 flex-1 rounded-md px-2 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition"
         >
           <span class="flex items-center gap-1.5 text-[11px]">
             <span class="min-w-0 shrink truncate font-mono text-zinc-700 dark:text-zinc-300">
               {props.link.host}
             </span>
-            <span class="min-w-0 flex-1 truncate text-zinc-500 dark:text-zinc-400">
+            <span class="min-w-0 flex-1 truncate text-zinc-500 group-hover/link:text-zinc-600 dark:text-zinc-400 dark:group-hover/link:text-zinc-400">
               {props.link.path}
             </span>
             <Show when={props.link.count > 1}>
-              <span class="shrink-0 tabular-nums text-zinc-500 dark:text-zinc-400">
+              <span class="shrink-0 tabular-nums text-zinc-500 group-hover/link:text-zinc-600 dark:text-zinc-400 dark:group-hover/link:text-zinc-400">
                 ×{props.link.count}
               </span>
             </Show>
@@ -457,7 +457,7 @@ function LinkRow(props: { link: MessageLink }) {
             </Show>
           </span>
           <Show when={props.link.text}>
-            <span class="mt-0.5 block truncate text-[11px] text-zinc-500 dark:text-zinc-400">
+            <span class="mt-0.5 block truncate text-[11px] text-zinc-500 group-hover/link:text-zinc-600 dark:text-zinc-400 dark:group-hover/link:text-zinc-400">
               {props.link.text}
             </span>
           </Show>
@@ -568,7 +568,7 @@ function TagEditor(props: { message: MessageSummary }) {
             removeTag(tags()[tags().length - 1]);
           }
         }}
-        class="bg-transparent text-xs text-zinc-700 dark:text-zinc-300 placeholder-zinc-500 dark:placeholder-zinc-400 outline-none min-w-[80px] flex-1 rounded-md px-1.5 py-0.5 transition focus:bg-zinc-100 dark:focus:bg-zinc-800/60"
+        class="bg-transparent text-xs text-zinc-700 dark:text-zinc-300 placeholder-zinc-500 focus:placeholder-zinc-600 dark:placeholder-zinc-400 dark:focus:placeholder-zinc-400 outline-none min-w-[80px] flex-1 rounded-md px-1.5 py-0.5 transition focus:bg-zinc-100 dark:focus:bg-zinc-800/60"
       />
     </div>
   );
diff --git a/ui/src/components/Inbox.tsx b/ui/src/components/Inbox.tsx
index 0f42007..8792ebf 100644
--- a/ui/src/components/Inbox.tsx
+++ b/ui/src/components/Inbox.tsx
@@ -287,7 +287,7 @@ function MessageRow(props: { msg: Accessor<MessageSummary>; index: number }) {
       aria-setsize={listSize()}
       data-id={msg().id}
       onClick={() => selectMessage(msg())}
-      class={`w-full text-left rounded-lg px-2.5 py-2 transition cursor-pointer ${
+      class={`group/row w-full text-left rounded-lg px-2.5 py-2 transition cursor-pointer ${
         isSelected()
           ? "inbox-row-selected"
           : "hover:bg-zinc-100/80 dark:hover:bg-zinc-800/50"
@@ -321,14 +321,14 @@ function MessageRow(props: { msg: Accessor<MessageSummary>; index: number }) {
               {msg().subject || "(no subject)"}
             </span>
             <span
-              class={`text-[11px] leading-4 tabular-nums flex-shrink-0 ${isSelected() ? "text-zinc-600 dark:text-zinc-300" : "text-zinc-500 dark:text-zinc-400"}`}
+              class={`text-[11px] leading-4 tabular-nums flex-shrink-0 ${isSelected() ? "text-zinc-600 dark:text-zinc-300" : "text-zinc-500 group-hover/row:text-zinc-600 dark:text-zinc-400 dark:group-hover/row:text-zinc-400"}`}
             >
               {formatDate(msg().created_at)}
             </span>
           </div>
           <div class="flex items-center gap-1.5 mt-0.5">
             <span
-              class={`text-xs leading-4 truncate min-w-0 ${isSelected() ? "text-zinc-600 dark:text-zinc-300" : "text-zinc-500 dark:text-zinc-400"}`}
+              class={`text-xs leading-4 truncate min-w-0 ${isSelected() ? "text-zinc-600 dark:text-zinc-300" : "text-zinc-500 group-hover/row:text-zinc-600 dark:text-zinc-400 dark:group-hover/row:text-zinc-400"}`}
             >
               {routeLine(msg())}
             </span>
@@ -345,7 +345,7 @@ function MessageRow(props: { msg: Accessor<MessageSummary>; index: number }) {
                   )}
                 </For>
                 <Show when={msg().tags.length > 3}>
-                  <span class="text-[10px] text-zinc-500 dark:text-zinc-400">
+                  <span class="text-[10px] text-zinc-500 group-hover/row:text-zinc-600 dark:text-zinc-400 dark:group-hover/row:text-zinc-400">
                     +{msg().tags.length - 3}
                   </span>
                 </Show>