fix: improve badge text color contrast for WCAG AA compliance

Added CSS custom properties --type-{name}-text for each article type with appropriate text colors per theme:
- Dark mode: all types use black text (#000000) for sufficient contrast
- Light mode: tech and photo types use white text (#ffffff), life/quote/link use black text (#000000)

Updated article-header.html and article-card.html to use color: var(--type-{name}-text) instead of hardcoded text-white class.

Improves contrast ratios:
- Quote type dark mode: 1.34:1 → 15.66:1 (white on #00ff88 was failing WCAG AA)
- All other types now pass 4.5:1 minimum for WCAG AA small text

Co-Authored-By: Claude Haiku 4.5 <redacted>

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index f2182a6c5a5de8096aa690c92aa5fde256a32782..1588b6162c711274b8854f93e287c507c339a045 100644 (file)
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -23,6 +23,12 @@
   --type-quote: #00ff88;
   --type-link: #38bdf8;
   --type-photo: #ec4899;
+  /* Article type text colors - dark (all black for WCAG AA) */
+  --type-tech-text: #000000;
+  --type-life-text: #000000;
+  --type-quote-text: #000000;
+  --type-link-text: #000000;
+  --type-photo-text: #000000;
 }
 
 /* Light theme overrides */
@@ -46,6 +52,12 @@ html.theme-light {
   --type-quote: #008f5a;
   --type-link: #0284c7;
   --type-photo: #be185d;
+  /* Article type text colors - light (mixed for WCAG AA) */
+  --type-tech-text: #ffffff;
+  --type-life-text: #000000;
+  --type-quote-text: #000000;
+  --type-link-text: #000000;
+  --type-photo-text: #ffffff;
 }
 
 /* No-JS fallback: prefers-color-scheme light */
@@ -69,6 +81,11 @@ html.theme-light {
     --type-quote: #008f5a;
     --type-link: #0284c7;
     --type-photo: #be185d;
+    --type-tech-text: #ffffff;
+    --type-life-text: #000000;
+    --type-quote-text: #000000;
+    --type-link-text: #000000;
+    --type-photo-text: #ffffff;
   }
 }
 

diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 362d7df49748f43c5977208e89fa42aad9da9ec3..86043923a50d633819d2f7e633feda5fdf7cab2f 100644 (file)
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -2583,6 +2583,10 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
   white-space: nowrap;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -2695,6 +2699,11 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
   padding-right: 0.5rem;
 }
 
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -3013,6 +3022,12 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
   --type-quote: #00ff88;
   --type-link: #38bdf8;
   --type-photo: #ec4899;
+  /* Article type text colors - dark (all black for WCAG AA) */
+  --type-tech-text: #000000;
+  --type-life-text: #000000;
+  --type-quote-text: #000000;
+  --type-link-text: #000000;
+  --type-photo-text: #000000;
 }
 
 /* Light theme overrides */
@@ -3037,6 +3052,12 @@ html.theme-light {
   --type-quote: #008f5a;
   --type-link: #0284c7;
   --type-photo: #be185d;
+  /* Article type text colors - light (mixed for WCAG AA) */
+  --type-tech-text: #ffffff;
+  --type-life-text: #000000;
+  --type-quote-text: #000000;
+  --type-link-text: #000000;
+  --type-photo-text: #ffffff;
 }
 
 /* No-JS fallback: prefers-color-scheme light */
@@ -3061,6 +3082,11 @@ html.theme-light {
     --type-quote: #008f5a;
     --type-link: #0284c7;
     --type-photo: #be185d;
+    --type-tech-text: #ffffff;
+    --type-life-text: #000000;
+    --type-quote-text: #000000;
+    --type-link-text: #000000;
+    --type-photo-text: #ffffff;
   }
 }
 

diff --git a/themes/danix-xyz-hacker/layouts/partials/article-card.html b/themes/danix-xyz-hacker/layouts/partials/article-card.html
index 0f5cfb93ceb17f078381ada812a26911b6e821e8..d8034641d90ece8662c6f2ee39970614da26dd4e 100644 (file)
--- a/themes/danix-xyz-hacker/layouts/partials/article-card.html
+++ b/themes/danix-xyz-hacker/layouts/partials/article-card.html
@@ -41,8 +41,8 @@
     <!-- Type badge pill overlay -->
     {{ if $typeData }}
     <div
-      class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold text-white transition-opacity"
-      style="background-color: var(--type-{{ $articleType }});"
+      class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold transition-opacity"
+      style="background-color: var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);"
     >
       {{ i18n $articleType }}
     </div>

diff --git a/themes/danix-xyz-hacker/layouts/partials/article-header.html b/themes/danix-xyz-hacker/layouts/partials/article-header.html
index 63b2a97242bb05fd7057ab2835da03301b25394d..94c78a5e981e6383427408ca1ce73d5d6a81de26 100644 (file)
--- a/themes/danix-xyz-hacker/layouts/partials/article-header.html
+++ b/themes/danix-xyz-hacker/layouts/partials/article-header.html
@@ -63,7 +63,7 @@
 
     <!-- Type badge -->
     {{ if and $typeData $hasType }}
-    <span class="inline-flex items-center px-2.5 py-1 rounded text-sm font-mono font-semibold whitespace-nowrap transition-all duration-200 text-white" style="background-color: var(--type-{{ $articleType }}); border: 1px solid var(--type-{{ $articleType }});">
+    <span class="inline-flex items-center px-2.5 py-1 rounded text-sm font-mono font-semibold whitespace-nowrap transition-all duration-200" style="background-color: var(--type-{{ $articleType }}); border: 1px solid var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);">
       {{ i18n $articleType }}
     </span>
     {{ end }}