MyWeekendlyAI concierge
Sign in

Internal · noindex

Accessibility audit

Computed WCAG 2.1 contrast ratios for the near-white --hero-foreground token on every hero surface. Values are derived live from the same oklch token math used in src/styles.css, so they stay accurate whenever tokens change.

Summary

11
AAA
7
AA
6
AA Large only
0
Fail
All overlays pass AA Large. 6 normal-size combinations below 4.5:1 — only valid for ≥18.66px bold or ≥24px text.

Per-surface results

Sunset gradient — Sunset stop 1 (light, top-left)
bg #C33E00 · fg #FFFBF4 (hero-foreground)
  • H1 hero title
    100% · large
    5.10:1
    AAA
  • Subtitle paragraph
    90% · large
    4.41:1
    AA
  • Province / back link
    90% · normal
    4.41:1
    AA Large
  • Province caption (uppercase)
    85% · normal
    4.09:1
    AA Large
  • “Popular” small label
    75% · normal
    3.51:1
    AA Large
  • Footer hint text
    70% · normal
    3.24:1
    AA Large
Sunset gradient — Sunset stop 2 (mid)
bg #9A0022 · fg #FFFBF4 (hero-foreground)
  • H1 hero title
    100% · large
    8.50:1
    AAA
  • Subtitle paragraph
    90% · large
    7.02:1
    AAA
  • Province / back link
    90% · normal
    7.02:1
    AAA
  • Province caption (uppercase)
    85% · normal
    6.35:1
    AA
  • “Popular” small label
    75% · normal
    5.14:1
    AA
  • Footer hint text
    70% · normal
    4.61:1
    AA
Sunset gradient — Sunset stop 3 (dark, bottom-right)
bg #5A0847 · fg #FFFBF4 (hero-foreground)
  • H1 hero title
    100% · large
    13.12:1
    AAA
  • Subtitle paragraph
    90% · large
    10.76:1
    AAA
  • Province / back link
    90% · normal
    10.76:1
    AAA
  • Province caption (uppercase)
    85% · normal
    9.70:1
    AAA
  • “Popular” small label
    75% · normal
    7.77:1
    AAA
  • Footer hint text
    70% · normal
    6.92:1
    AA
City photo + 55% black overlay (worst-case bright photo)
bg #5B6065 · fg #FFFBF4 (hero-foreground)
  • H1 hero title
    100% · large
    6.15:1
    AAA
  • Subtitle paragraph
    90% · large
    5.36:1
    AAA
  • Province / back link
    90% · normal
    5.36:1
    AA
  • Province caption (uppercase)
    85% · normal
    4.99:1
    AA
  • “Popular” small label
    75% · normal
    4.29:1
    AA Large
  • Footer hint text
    70% · normal
    3.97:1
    AA Large

Thresholds: AA = 4.5:1 normal · 3:1 large (≥18.66px bold or ≥24px). AAA = 7:1 normal · 4.5:1 large. The sunset gradient is theme-independent, so dark mode produces identical numbers. The “bright photo” simulation uses sRGB #CADBE0 — a worst-case sky/snow daytime image — as the underlying image before the black overlay.