diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-21 18:46:11 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-21 18:46:11 +0200 |
| commit | 2236d07a5247cab38e0e6b524bdfb26c12c143a8 (patch) | |
| tree | 1a6a1d0e86ca22b800a971e499fdee13fe203f78 /themes/danix-xyz-hacker/layouts/partials/article-header.html | |
| parent | 8e16e9f4665f2537225f1d21668c6a8002745770 (diff) | |
| download | danixxyz-2236d07a5247cab38e0e6b524bdfb26c12c143a8.tar.gz danixxyz-2236d07a5247cab38e0e6b524bdfb26c12c143a8.zip | |
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 <noreply@anthropic.com>
Diffstat (limited to 'themes/danix-xyz-hacker/layouts/partials/article-header.html')
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/partials/article-header.html | 2 |
1 files changed, 1 insertions, 1 deletions
diff --git a/themes/danix-xyz-hacker/layouts/partials/article-header.html b/themes/danix-xyz-hacker/layouts/partials/article-header.html index 63b2a97..94c78a5 100644 --- 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 }} |