#6 · stacks/paweldregan

Context

Light mode on paweldregan.com has a few colors that fall below readable contrast — most visibly on hover states and de-emphasized text. The dark variant is fine; light needs an audit.

A common pattern across the pages (sampled from pages/index.stx, pages/about.stx, etc.):

<a class="text-black/50 dark:text-white/50 hover:text-black dark:hover:text-white">…</a>
<svg class="text-black/40 dark:text-white/40 hover:…">…</svg>
<div class="text-black/25 dark:text-white/25">…</div>  <!-- stat labels -->
<p class="text-black/20 dark:text-white/20">…</p>      <!-- footer copy -->

The /40, /25, /20 opacities on black against a white background read fine on dark mode (where white/40 over black is still visible), but on light mode the same opacity over white drops below WCAG AA for body text. Hover transitions to full black are also abrupt — the rest in non-hover state is what users actually scan.

Scope

Audit every text-black/*, bg-black/*, border-black/* opacity variant used in pages/ and bring each to WCAG AA (4.5:1 for body, 3:1 for large text). Likely means bumping /20, /25, /30, /40 upward in light mode (e.g. /40 → /55 or /60).
Specifically check the nav social icons (text-black/40), the stat labels under the hero (text-black/25), and the footer (text-black/20).
Hover states: ensure the non-hover state is already readable on its own — hover should be a refinement, not the only path to legibility.
Keep the dark-mode classes alone — they read fine already.

Verification

Open paweldregan.com in light mode (force-toggle theme) and click through every page.
Run an accessibility audit (Lighthouse, axe DevTools, or WAVE) — should report 0 contrast errors.
Sanity check on a high-brightness screen outdoors if possible — the worst offenders are usually the de-emphasized text.

Out of scope

Color palette redesign / brand-color rework. This is purely contrast tuning on the existing palette.