From aa666fa93b76a96ab0913e9ec9db4a14ff271a46 Mon Sep 17 00:00:00 2001
From: svemagie <869694+svemagie@users.noreply.github.com>
Date: Thu, 19 Mar 2026 20:31:27 +0100
Subject: [PATCH] a11y: fix contrast failures on post-type labels and AI links
 (WCAG AA)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bump sky-600→sky-700, green-600→green-800, amber-600→amber-800 in
light mode across recent-posts, featured-posts, and ai-usage components.
Dark-mode -400 variants remain unchanged (already 7–9:1 on #1d2021).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _includes/components/sections/ai-usage.njk       |  4 ++--
 _includes/components/sections/featured-posts.njk |  6 +++---
 _includes/components/sections/recent-posts.njk   | 14 +++++++-------
 _includes/components/widgets/ai-usage.njk        |  4 ++--
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/_includes/components/sections/ai-usage.njk b/_includes/components/sections/ai-usage.njk
index 7410a82..b620474 100644
--- a/_includes/components/sections/ai-usage.njk
+++ b/_includes/components/sections/ai-usage.njk
@@ -18,7 +18,7 @@
         <div class="text-xs text-surface-600 dark:text-surface-400">Total posts</div>
       </div>
       <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
-        <div class="text-2xl font-bold font-mono text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div>
+        <div class="text-2xl font-bold font-mono text-amber-800 dark:text-amber-400">{{ stats.aiCount }}</div>
         <div class="text-xs text-surface-600 dark:text-surface-400">AI-involved</div>
       </div>
       <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
@@ -56,7 +56,7 @@
     {% endif %}
   </div>
 
-  <a href="/ai/" class="text-sm text-amber-600 dark:text-amber-400 hover:underline mt-4 inline-flex items-center gap-1">
+  <a href="/ai/" class="text-sm text-amber-800 dark:text-amber-400 hover:underline mt-4 inline-flex items-center gap-1">
     View full AI transparency report
     <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
diff --git a/_includes/components/sections/featured-posts.njk b/_includes/components/sections/featured-posts.njk
index 8b45bc0..8ecb893 100644
--- a/_includes/components/sections/featured-posts.njk
+++ b/_includes/components/sections/featured-posts.njk
@@ -82,7 +82,7 @@
         </div>
         <div class="flex-1 min-w-0">
           <div class="flex items-center gap-3 text-xs text-surface-600 dark:text-surface-400">
-            <span class="font-medium text-amber-600 dark:text-amber-400">Bookmarked</span>
+            <span class="font-medium text-amber-800 dark:text-amber-400">Bookmarked</span>
             <time class="dt-published font-mono" datetime="{{ post.date | isoDate }}">
               {{ post.date | dateDisplay }}
             </time>
@@ -115,7 +115,7 @@
         </div>
         <div class="flex-1 min-w-0">
           <div class="flex items-center gap-3 text-xs text-surface-600 dark:text-surface-400">
-            <span class="font-medium text-green-600 dark:text-green-400">Reposted</span>
+            <span class="font-medium text-green-800 dark:text-green-400">Reposted</span>
             <time class="dt-published font-mono" datetime="{{ post.date | isoDate }}">
               {{ post.date | dateDisplay }}
             </time>
@@ -143,7 +143,7 @@
         </div>
         <div class="flex-1 min-w-0">
           <div class="flex items-center gap-3 text-xs text-surface-600 dark:text-surface-400">
-            <span class="font-medium text-sky-600 dark:text-sky-400">In reply to</span>
+            <span class="font-medium text-sky-700 dark:text-sky-400">In reply to</span>
             <time class="dt-published font-mono" datetime="{{ post.date | isoDate }}">
               {{ post.date | dateDisplay }}
             </time>
diff --git a/_includes/components/sections/recent-posts.njk b/_includes/components/sections/recent-posts.njk
index adea203..9345659 100644
--- a/_includes/components/sections/recent-posts.njk
+++ b/_includes/components/sections/recent-posts.njk
@@ -97,7 +97,7 @@
         </div>
         <div class="flex-1 min-w-0">
           <div class="post-meta">
-            <span class="font-medium text-amber-600 dark:text-amber-400">Bookmarked</span>
+            <span class="font-medium text-amber-800 dark:text-amber-400">Bookmarked</span>
             <time-difference><time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
               {{ post.date | dateDisplay }}
             </time></time-difference>
@@ -116,7 +116,7 @@
           </div>
           {% if post.data.title %}
           <h3 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mt-2">
-            <a class="hover:text-amber-600 dark:hover:text-amber-400" href="{{ post.url }}">{{ post.data.title }}</a>
+            <a class="hover:text-amber-800 dark:hover:text-amber-400" href="{{ post.url }}">{{ post.data.title }}</a>
           </h3>
           {% endif %}
           {{ bookmarkedUrl | unfurlCard | safe }}
@@ -128,7 +128,7 @@
             {{ post.templateContent | safe }}
           </div>
           {% endif %}
-          <a class="u-url text-sm text-amber-600 dark:text-amber-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Bookmark from ' + (post.date | dateDisplay)) }}">Permalink</a>
+          <a class="u-url text-sm text-amber-800 dark:text-amber-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Bookmark from ' + (post.date | dateDisplay)) }}">Permalink</a>
         </div>
       </div>
 
@@ -142,7 +142,7 @@
         </div>
         <div class="flex-1 min-w-0">
           <div class="post-meta">
-            <span class="font-medium text-green-600 dark:text-green-400">Reposted</span>
+            <span class="font-medium text-green-800 dark:text-green-400">Reposted</span>
             <time-difference><time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
               {{ post.date | dateDisplay }}
             </time></time-difference>
@@ -168,7 +168,7 @@
             {{ post.templateContent | safe }}
           </div>
           {% endif %}
-          <a class="u-url text-sm text-green-600 dark:text-green-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Repost from ' + (post.date | dateDisplay)) }}">Permalink</a>
+          <a class="u-url text-sm text-green-800 dark:text-green-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Repost from ' + (post.date | dateDisplay)) }}">Permalink</a>
         </div>
       </div>
 
@@ -182,7 +182,7 @@
         </div>
         <div class="flex-1 min-w-0">
           <div class="post-meta">
-            <span class="font-medium text-sky-600 dark:text-sky-400">In reply to</span>
+            <span class="font-medium text-sky-700 dark:text-sky-400">In reply to</span>
             <time-difference><time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
               {{ post.date | dateDisplay }}
             </time></time-difference>
@@ -208,7 +208,7 @@
             {{ post.templateContent | safe }}
           </div>
           {% endif %}
-          <a class="u-url text-sm text-sky-600 dark:text-sky-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Reply from ' + (post.date | dateDisplay)) }}">Permalink</a>
+          <a class="u-url text-sm text-sky-700 dark:text-sky-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Reply from ' + (post.date | dateDisplay)) }}">Permalink</a>
         </div>
       </div>
 
diff --git a/_includes/components/widgets/ai-usage.njk b/_includes/components/widgets/ai-usage.njk
index 5063562..6c9a7c4 100644
--- a/_includes/components/widgets/ai-usage.njk
+++ b/_includes/components/widgets/ai-usage.njk
@@ -18,7 +18,7 @@
       <div class="text-[10px] text-surface-600 dark:text-surface-400">Total</div>
     </div>
     <div class="text-center p-2 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
-      <div class="text-lg font-bold text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div>
+      <div class="text-lg font-bold text-amber-800 dark:text-amber-400">{{ stats.aiCount }}</div>
       <div class="text-[10px] text-surface-600 dark:text-surface-400">AI-involved</div>
     </div>
     <div class="text-center p-2 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
@@ -53,7 +53,7 @@
   {% postGraph aiPostsList, { prefix: "ai-widget", limit: 1, noLabels: true, boxColorDark: "#504945", highlightColorLight: "#076678", highlightColorDark: "#83a598" } %}
   {% endif %}
 
-  <a href="/ai/" class="text-sm text-amber-600 dark:text-amber-400 hover:underline flex items-center gap-1 mt-3">
+  <a href="/ai/" class="text-sm text-amber-800 dark:text-amber-400 hover:underline flex items-center gap-1 mt-3">
     View full AI report
     <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
   </a>