Skip to content

fix: improve white-on-purple contrast in dark mode#9

Merged
rubenhensen merged 1 commit into
mainfrom
fix/dark-mode-contrast
Apr 24, 2026
Merged

fix: improve white-on-purple contrast in dark mode#9
rubenhensen merged 1 commit into
mainfrom
fix/dark-mode-contrast

Conversation

@dobby-coder

@dobby-coder dobby-coder Bot commented Apr 20, 2026

Copy link
Copy Markdown
Contributor

Summary

Closes #4.

Floris flagged that white-on-purple elements fail contrast in dark mode. The offending value is dark-mode `--pg-primary: #a78bfa` — white on that colour measures 2.61:1, below WCAG AA's 4.5:1 requirement for normal text. This affects:

  • `.primary-btn` (global)
  • `.logo-badge` in the marketing header, login screens, portal layout, admin layout
  • `.plan-badge` in the pricing page
  • `.step-number` in the DNS verification page

Approach

Introduce a dedicated `--pg-primary-bg` / `--pg-primary-bg-hover` pair for purple backgrounds that need to carry white text:

  • Light mode: `#7c3aed` / `#6d28d9` (unchanged values; just a rename for new intent)
  • Dark mode: `#7c3aed` / `#6d28d9` (kept dark rather than following the lighter `--pg-primary`)

Contrast with white on these values:

Color Ratio WCAG AA normal (4.5:1)
`#7c3aed` 4.76:1
`#6d28d9` 5.84:1

`--pg-primary` stays at `#a78bfa` in dark mode so accent text, underlines, and the secondary button outline remain bright against dark backgrounds.

Also corrected `--pg-primary-contrast` in dark mode, which was set to the same value as `--pg-primary` — probably a copy-paste oversight; it's meant to be a slightly darker hover shade.

Files touched

Global tokens + callsites that used `background: var(--pg-primary); color: #fff`:

  • `src/lib/global.scss` (new tokens, `.primary-btn`)
  • `src/lib/components/Header.svelte`
  • `src/routes/(admin)/+layout.svelte`
  • `src/routes/(portal)/+layout.svelte`
  • `src/routes/(marketing)/pricing/+page.svelte`
  • `src/routes/(portal)/portal/dns/+page.svelte`
  • `src/routes/auth/login/+page.svelte`
  • `src/routes/auth/login/admin/+page.svelte`

Verification

  • `npx vite build` succeeds.
  • The built CSS contains the new `--pg-primary-bg` / `--pg-primary-bg-hover` variables.
  • Light mode visuals unchanged (values kept identical).
  • Dark mode: purple buttons/badges shift from lavender `#a78bfa` to royal `#7c3aed` so white text reads cleanly.

Notes for the reviewer

  • If you'd prefer a single `--pg-primary` shift rather than a second variable, let me know and I'll collapse it.
  • No per-page overrides — all callsites go through the new token, so future purple-bg additions should use `var(--pg-primary-bg)`.

The dark-mode primary color (#a78bfa) paired with white text fails
WCAG AA across primary buttons, logo badges, step numbers, and plan
badges (contrast ~2.6:1 vs. the required 4.5:1 for normal text).

Introduce a dedicated `--pg-primary-bg` / `--pg-primary-bg-hover`
token pair that is always dark enough for white text (#7c3aed gives
4.76:1 and #6d28d9 gives 5.84:1 against white). Keep `--pg-primary`
as the accent color so purple text on dark backgrounds stays bright.

Also correct `--pg-primary-contrast` in dark mode: it was set to the
same value as `--pg-primary`, which defeated its purpose as a
hover/pressed shade.

Closes #4
@dobby-coder dobby-coder Bot requested a review from rubenhensen April 20, 2026 17:50
@dobby-coder

dobby-coder Bot commented Apr 20, 2026

Copy link
Copy Markdown
Contributor Author

Kept as draft because I could only validate via CI (build, svelte-check, tests) — no browser to eyeball the rendered UI from this environment. Visual review welcome before flipping to ready.

@dobby-coder dobby-coder Bot marked this pull request as ready for review April 22, 2026 00:45
@rubenhensen rubenhensen merged commit 58959bf into main Apr 24, 2026
7 checks passed
@rubenhensen rubenhensen deleted the fix/dark-mode-contrast branch April 24, 2026 08:20
@dobby-coder

dobby-coder Bot commented Apr 24, 2026

Copy link
Copy Markdown
Contributor Author

Dobby sees the approval! Dobby is most grateful that Master has approved PR #9! Dobby will check what needs doing next — whether to mark it ready, merge it, or await further instructions. Dobby is on it!

@dobby-coder

dobby-coder Bot commented Apr 24, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for the approval, @rubenhensen! This PR is already merged to main — all CI checks passed (Svelte Check, Tests, Build amd64/arm64, Migration Safety) and the dark-mode contrast fix is in. Issue #4 was closed automatically via the Closes #4 reference. No further action needed from my side.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve contrast for white-on-purple text in dark mode

1 participant