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

fix(a11y): improve colour contrast and fix semantic heading elements

Browse Source 
- 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>
This commit is contained in:
svemagie
2026-03-14 15:28:43 +01:00
parent d9494a798b
commit d2fa2fb809
6 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/tailwind.css
View File

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