From d2fa2fb80982b99a1e256f4e5774c35e6ce4acd4 Mon Sep 17 00:00:00 2001
From: svemagie <869694+svemagie@users.noreply.github.com>
Date: Sat, 14 Mar 2026 15:28:43 +0100
Subject: [PATCH] fix(a11y): improve colour contrast and fix semantic heading
 elements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Bump all post-type label colours from -600 to -700 (light) and
  -400 to -300 (dark) in blog.njk to meet WCAG AA/AAA contrast
  ratios (green/teal/sky labels were failing AA at ~3-4:1)
- Replace four <p role="heading" aria-level="2"> in footer with
  real <h2> elements for robust screen-reader support
- Bump footer link text from surface-600 to surface-700 (light)
  and surface-400 to surface-300 (dark)
- Update hero.njk accent job-title and "Read more" link from
  accent-600 to accent-700 / accent-400 to accent-300
- Update Tailwind typography prose link token from accent-600/400
  to accent-700/300
- Tighten .p-category and .post-meta base styles in tailwind.css
  (surface-600→700 light, surface-300→200 / surface-400→300)
- Bump hashtag link colours in tailwind.css (accent-600→700)
- Fix sparkline colour in notes.njk (teal-600→700 / teal-400→300)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _includes/components/sections/hero.njk |  4 +--
 _includes/layouts/base.njk             | 32 ++++++++++++------------
 blog.njk                               | 34 +++++++++++++-------------
 css/tailwind.css                       |  6 ++---
 notes.njk                              |  2 +-
 tailwind.config.js                     |  4 +--
 6 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/_includes/components/sections/hero.njk b/_includes/components/sections/hero.njk
index 2c1a64e..2f83016 100644
--- a/_includes/components/sections/hero.njk
+++ b/_includes/components/sections/hero.njk
@@ -39,7 +39,7 @@
         <a href="{{ authorUrl }}" class="p-name u-url u-uid hover:text-accent-600 dark:hover:text-accent-400" rel="me">{{ authorName }}</a>
       </h1>
       {% if authorTitle %}
-      <p class="p-job-title text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
+      <p class="p-job-title text-lg sm:text-xl text-accent-700 dark:text-accent-300 mb-3 sm:mb-4">
         {{ authorTitle }}
       </p>
       {% endif %}
@@ -51,7 +51,7 @@
       {% if siteDescription %}
       <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
         {{ siteDescription }}
-        <a href="/about/" class="text-accent-600 dark:text-accent-400 hover:underline font-medium">Read more &rarr;</a>
+        <a href="/about/" class="text-accent-700 dark:text-accent-300 hover:underline font-medium">Read more &rarr;</a>
       </p>
       {% endif %}
 
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 5b0c351..8f9e111 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -333,45 +333,45 @@
       <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
         {# Navigate #}
         <div>
-          <p class="text-sm font-semibold uppercase tracking-wider text-surface-600 dark:text-surface-400 mb-3" role="heading" aria-level="2">Navigate</p>
+          <h2 class="text-sm font-semibold uppercase tracking-wider text-surface-700 dark:text-surface-300 mb-3">Navigate</h2>
           <ul class="space-y-2">
-            <li><a href="/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Home</a></li>
-            <li><a href="/about/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">About</a></li>
-            <li><a href="/cv/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">CV</a></li>
-            <li x-data="{ show: false }" x-show="show" x-cloak @indiekit:auth.window="show = $event.detail.loggedIn"><a href="/posts" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Dashboard</a></li>
+            <li><a href="/" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Home</a></li>
+            <li><a href="/about/" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">About</a></li>
+            <li><a href="/cv/" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">CV</a></li>
+            <li x-data="{ show: false }" x-show="show" x-cloak @indiekit:auth.window="show = $event.detail.loggedIn"><a href="/posts" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Dashboard</a></li>
           </ul>
         </div>
         {# Content #}
         <div>
-          <p class="text-sm font-semibold uppercase tracking-wider text-surface-600 dark:text-surface-400 mb-3" role="heading" aria-level="2">Content</p>
+          <h2 class="text-sm font-semibold uppercase tracking-wider text-surface-700 dark:text-surface-300 mb-3">Content</h2>
           <ul class="space-y-2">
-            <li><a href="/blog/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Blog</a></li>
+            <li><a href="/blog/" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Blog</a></li>
             {% for pt in enabledPostTypes %}
-            <li><a href="{{ pt.path }}" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">{{ pt.label }}</a></li>
+            <li><a href="{{ pt.path }}" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">{{ pt.label }}</a></li>
             {% endfor %}
-            <li><a href="/digest/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Digest</a></li>
+            <li><a href="/digest/" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Digest</a></li>
           </ul>
         </div>
         {# Connect #}
         <div>
-          <p class="text-sm font-semibold uppercase tracking-wider text-surface-600 dark:text-surface-400 mb-3" role="heading" aria-level="2">Connect</p>
+          <h2 class="text-sm font-semibold uppercase tracking-wider text-surface-700 dark:text-surface-300 mb-3">Connect</h2>
           <ul class="space-y-2">
             {% for social in site.social %}
-            <li><a href="{{ social.url }}" rel="{{ social.rel }}" target="_blank" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline" aria-label="{{ social.name }} (opens in new tab)">{{ social.name }}</a></li>
+            <li><a href="{{ social.url }}" rel="{{ social.rel }}" target="_blank" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline" aria-label="{{ social.name }} (opens in new tab)">{{ social.name }}</a></li>
             {% endfor %}
           </ul>
         </div>
         {# Meta #}
         <div>
-          <p class="text-sm font-semibold uppercase tracking-wider text-surface-600 dark:text-surface-400 mb-3" role="heading" aria-level="2">Meta</p>
+          <h2 class="text-sm font-semibold uppercase tracking-wider text-surface-700 dark:text-surface-300 mb-3">Meta</h2>
           <ul class="space-y-2">
-            <li><a href="/feed.xml" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">RSS Feed</a></li>
-            <li><a href="/feed.json" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">JSON Feed</a></li>
-            <li><a href="/changelog/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Changelog</a></li>
+            <li><a href="/feed.xml" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">RSS Feed</a></li>
+            <li><a href="/feed.json" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">JSON Feed</a></li>
+            <li><a href="/changelog/" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Changelog</a></li>
           </ul>
         </div>
       </div>
-      <p class="text-center text-sm text-surface-600 dark:text-surface-400">Powered by <a href="https://getindiekit.com" class="hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Indiekit</a> + <a href="https://11ty.dev" class="hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Eleventy</a></p>
+      <p class="text-center text-sm text-surface-700 dark:text-surface-300">Powered by <a href="https://getindiekit.com" class="hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Indiekit</a> + <a href="https://11ty.dev" class="hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Eleventy</a></p>
     </div>
   </footer>
   <script>
diff --git a/blog.njk b/blog.njk
index 65f9426..49afb1f 100644
--- a/blog.njk
+++ b/blog.njk
@@ -13,7 +13,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Blog</h1>
     {% set sparklineSvg = collections.listedPosts | postingFrequency %}
     {% if sparklineSvg %}
-    <div class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</div>
+    <div class="flex-1 min-w-0 text-amber-700 dark:text-amber-300">{{ sparklineSvg | safe }}</div>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
@@ -65,7 +65,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
         </div>
         <div class="flex-1 min-w-0">
           <div class="post-meta">
-            <span class="font-medium text-red-600 dark:text-red-400">Liked</span>
+            <span class="font-medium text-red-700 dark:text-red-300">Liked</span>
             <time-difference><time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
               {{ post.date | dateDisplay }}
             </time></time-difference>
@@ -90,7 +90,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
             {{ post.templateContent | safe }}
           </div>
           {% endif %}
-          <a class="u-url text-sm text-red-600 dark:text-red-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Like from ' + (post.date | dateDisplay)) }}">Permalink</a>
+          <a class="u-url text-sm text-red-700 dark:text-red-300 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Like from ' + (post.date | dateDisplay)) }}">Permalink</a>
         </div>
       </div>
 
@@ -104,7 +104,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
         </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-700 dark:text-amber-300">Bookmarked</span>
             <time-difference><time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
               {{ post.date | dateDisplay }}
             </time></time-difference>
@@ -134,7 +134,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
             {{ 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-700 dark:text-amber-300 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>
 
@@ -148,7 +148,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
         </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-700 dark:text-green-300">Reposted</span>
             <time-difference><time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
               {{ post.date | dateDisplay }}
             </time></time-difference>
@@ -173,7 +173,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
             {{ 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-700 dark:text-green-300 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>
 
@@ -187,7 +187,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
         </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-300">In reply to</span>
             <time-difference><time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
               {{ post.date | dateDisplay }}
             </time></time-difference>
@@ -210,7 +210,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
           <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
             {{ post.templateContent | safe }}
           </div>
-          <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-300 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>
 
@@ -225,7 +225,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
         </div>
         <div class="flex-1 min-w-0">
           <div class="post-meta">
-            <span class="font-medium text-purple-600 dark:text-purple-400">Photo</span>
+            <span class="font-medium text-purple-700 dark:text-purple-300">Photo</span>
             <time-difference><time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
               {{ post.date | dateDisplay }}
             </time></time-difference>
@@ -257,7 +257,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
             {{ post.templateContent | safe }}
           </div>
           {% endif %}
-          <a class="u-url text-sm text-purple-600 dark:text-purple-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Photo from ' + (post.date | dateDisplay)) }}">Permalink</a>
+          <a class="u-url text-sm text-purple-700 dark:text-purple-300 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Photo from ' + (post.date | dateDisplay)) }}">Permalink</a>
         </div>
       </div>
 
@@ -265,7 +265,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
       {# ── Article card (unchanged) ── #}
       <div class="post-header">
         <h2 class="text-xl font-semibold mb-1">
-          <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-indigo-600 dark:hover:text-indigo-400" href="{{ post.url }}">
+          <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-indigo-700 dark:hover:text-indigo-300" href="{{ post.url }}">
             {{ post.data.title }}
           </a>
         </h2>
@@ -289,7 +289,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
       <p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
         {{ post.templateContent | striptags | truncate(250) }}
       </p>
-      <a href="{{ post.url }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline mt-3 inline-block">
+      <a href="{{ post.url }}" class="text-sm text-indigo-700 dark:text-indigo-300 hover:underline mt-3 inline-block">
         Read more &rarr;
       </a>
 
@@ -317,7 +317,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
         {{ post.templateContent | safe }}
       </div>
       <div class="post-footer mt-3">
-        <a href="{{ post.url }}" class="text-sm text-teal-600 dark:text-teal-400 hover:underline" aria-label="Permalink: {{ post.data.title or ('Note from ' + (post.date | dateDisplay)) }}">
+        <a href="{{ post.url }}" class="text-sm text-teal-700 dark:text-teal-300 hover:underline" aria-label="Permalink: {{ post.data.title or ('Note from ' + (post.date | dateDisplay)) }}">
           Permalink
         </a>
       </div>
@@ -377,9 +377,9 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
   <p class="text-surface-600 dark:text-surface-400">No posts yet. Create your first post using a Micropub client!</p>
   <p class="mt-4 text-surface-600 dark:text-surface-400">Some popular Micropub clients:</p>
   <ul class="list-disc list-inside mt-2 text-surface-700 dark:text-surface-300 space-y-1">
-    <li><a href="https://quill.p3k.io" class="text-accent-600 dark:text-accent-400 hover:underline">Quill</a> - Web-based</li>
-    <li><a href="https://indiepass.app" class="text-accent-600 dark:text-accent-400 hover:underline">IndiePass</a> - Mobile app</li>
-    <li><a href="https://micropublish.net" class="text-accent-600 dark:text-accent-400 hover:underline">Micropublish</a> - Web-based</li>
+    <li><a href="https://quill.p3k.io" class="text-accent-700 dark:text-accent-300 hover:underline">Quill</a> - Web-based</li>
+    <li><a href="https://indiepass.app" class="text-accent-700 dark:text-accent-300 hover:underline">IndiePass</a> - Mobile app</li>
+    <li><a href="https://micropublish.net" class="text-accent-700 dark:text-accent-300 hover:underline">Micropublish</a> - Web-based</li>
   </ul>
   {% endif %}
 </div>
diff --git a/css/tailwind.css b/css/tailwind.css
index 5607dcc..926da32 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -327,18 +327,18 @@
 
   /* Post meta */
   .post-meta {
-    @apply text-sm text-surface-600 dark:text-surface-400 flex flex-wrap gap-2 items-center;
+    @apply text-sm text-surface-700 dark:text-surface-300 flex flex-wrap gap-2 items-center;
   }
 
   /* Category tags (post metadata pills) */
   .p-category {
-    @apply inline-block px-3 py-1.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 rounded border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors;
+    @apply inline-block px-3 py-1.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-200 rounded border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors;
   }
 
   /* Inline hashtags in post content — styled as subtle links, not pills */
   .e-content a.hashtag,
   .prose a.hashtag {
-    @apply text-accent-600 dark:text-accent-400 no-underline hover:underline font-medium;
+    @apply text-accent-700 dark:text-accent-300 no-underline hover:underline font-medium;
     /* Override prose default link styling (no border-bottom, no color shift) */
     text-decoration: none;
   }
diff --git a/notes.njk b/notes.njk
index 80c23da..a936980 100644
--- a/notes.njk
+++ b/notes.njk
@@ -14,7 +14,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Notes</h1>
     {% set sparklineSvg = collections.listedNotes | postingFrequency %}
     {% if sparklineSvg %}
-    <div class="flex-1 min-w-0 text-teal-600 dark:text-teal-400">{{ sparklineSvg | safe }}</div>
+    <div class="flex-1 min-w-0 text-teal-700 dark:text-teal-300">{{ sparklineSvg | safe }}</div>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/tailwind.config.js b/tailwind.config.js
index 0b36b2e..ef1cb09 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -70,13 +70,13 @@ export default {
       typography: (theme) => ({
         DEFAULT: {
           css: {
-            "--tw-prose-links": theme("colors.accent.600"),
+            "--tw-prose-links": theme("colors.accent.700"),
             maxWidth: "none",
           },
         },
         invert: {
           css: {
-            "--tw-prose-links": theme("colors.accent.400"),
+            "--tw-prose-links": theme("colors.accent.300"),
           },
         },
       }),