uTune AI — Low-Light Readability Lessons

A teaching workspace about making utune-ai.vercel.app easy to read in low light.

Mission: fix the text contrast over the site's existing backgrounds — the muted gray copy (~2.5:1 on white/cream) and the white hero headline over the sky gradient (~2:1) — and learn the transferable skill of measuring and remediating contrast. Dark mode is a deferred, later phase.

Lessons

• Lesson 1 — Diagnose why uTune AI can't go dark today
  DevTools dark-mode emulation and CSS archaeology: naming the blockers (hardcoded hex literals, nothing listening to prefers-color-scheme, hardcoded SVG hero). Dark mode itself is deferred; the diagnosis technique carries over.
• Lesson 2 — Contrast belongs to the pair, not the color
  WCAG AA thresholds (4.5:1 body, 3:1 large text), measuring pairs in Chrome DevTools, and the two concrete fixes: #9aa0aa → #646a78 on light backgrounds, and ink text or a scrim for the hero headline.

💬 These lessons are authored interactively — ask the teacher follow-up questions any time.

Workspace utune-ai · mission: make utune-ai.vercel.app easy to read in low light