Computed actual contrast ratios rather than eyeballing:
- White button text on teal was 3.67:1, fails AA (needs 4.5:1) — darkened
the CTA color to 007f73, now 4.90:1.
- Rose nav-hover text was 2.50:1 on the header, 1.82:1 on the footer —
both far below any AA threshold. Rose now shows as an underline instead
of a text color change, so the accent survives without breaking
legibility.
- Added a skip-to-content link (hidden until focused, standard pattern),
aria-label on both nav landmarks (header nav and footer nav previously
both announced as plain 'navigation' with no way to distinguish them),
and an explicit high-contrast focus-visible ring — including a
header-specific override since the default cta-color ring was only
~1:1 against the slate blue header background.
All values re-verified in both light and dark mode, not just light.
Reconciled two overlapping note sets — kept the intent from both,
resolved contradictions toward the more distinctive option (cream over
plain gray/white background), and fixed a couple of pairings that would
have been genuinely hard to read as written (teal button with taupe
text, rose links on taupe — both too low-contrast) by keeping the color
but swapping in white/higher-contrast text instead.
Slate blue header (firm, confident) with warm cream body (gentle,
breathing room), teal CTAs (clarity/action), dusty rose as the one purely
interactive/decorative touch (hover states), warm taupe grounding the
footer. Headings in slate blue to tie the brand color into the type
hierarchy. Roboto/Open Sans/Source Code Pro per the font pairing brief,
loaded via Google Fonts since that's what was specified.
Minified and fingerprinted in production (cache-busting via content
hash), plain link in dev. Sets up for actual styling work — much easier
to find and edit than a <style> block buried in baseof.html.
will