From 2236d07a5247cab38e0e6b524bdfb26c12c143a8 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Tue, 21 Apr 2026 18:46:11 +0200 Subject: fix: improve badge text color contrast for WCAG AA compliance MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- themes/danix-xyz-hacker/assets/css/main.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'themes/danix-xyz-hacker/assets/css/main.css') diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css index f2182a6..1588b61 100644 --- 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; } } -- cgit v1.2.3