giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

a11y: fix contrast failures on post-type labels and AI links (WCAG AA)

Browse Source 
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>
This commit is contained in:
svemagie
2026-03-19 20:31:27 +01:00
parent f37dd86ff1
commit aa666fa93b
4 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
_includes/components/sections/ai-usage.njk
View File

@@ -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"/>

6
_includes/components/sections/featured-posts.njk
View File

@@ -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>

14
_includes/components/sections/recent-posts.njk
View File

@@ -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>

4
_includes/components/widgets/ai-usage.njk
View File

@@ -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>