Skip to content

Brand palette color-contrast pass — fail-safe AA on light + primary backgrounds #38

Description

@raffelino

Background

The Phase 4 accessibility gate (e2e/tests/phase4-accessibility.spec.ts) currently disables the color-contrast axe rule because the brand palette has several pairings that fall short of WCAG AA's 4.5:1 ratio for normal text:

Pair Ratio Where
#3B7DD8 (primary) on #FFFFFF 4.1 every welcome-cta--primary button, lang-btn.active
#3B7DD8 on #F4F7FA (page bg) 3.82 welcome-cta--secondary, <a> to viadee.de, <a> to /imprint, footer links generally
#858687 (muted) on #F4F7FA 3.39 welcome-skip text-button, secondary captions

A purely-numerical fix is to darken --color-primary from #3B7DD8 to roughly #2D63B0 (or similar with relative luminance ≤ 0.166) — that crosses 4.5 against both white and the page bg. Brand alignment with viadee should ratify the exact replacement.

Checklist

  • Pick a darker --color-primary that hits ≥ 4.5:1 against both #FFFFFF and #F4F7FA. Update frontend/src/assets/styles/main.css and the --color-primary references throughout (most are CSS-var, a handful in inline style= attributes will need a sweep).
  • Same exercise for --color-text-muted (currently ~#858687 / #5A6380) — ensure muted text on #F4F7FA hits 4.5:1.
  • Verify the recorder's chips, the flow editor's setting-meta side notes, and the dashboard cards still read correctly with the new primary.
  • Re-enable color-contrast in phase4-accessibility.spec.ts (remove the three .disableRules(['color-contrast']) calls + the comment block) and run the gate to confirm zero blocking violations.
  • Fix any remaining contrast issues axe surfaces after the palette tweak.

Why this isn't blocking 0.9.0

These are pre-existing violations from when the Phase 4 work landed. They don't regress the visible UX (no element is invisible), the gate fires on far cheaper-to-fix issues (missing labels, broken ARIA, focus traps), and the palette change is an organisation-wide brand decision that needs a real design review rather than a quick pin-the-test fix. Tracking explicitly so it doesn't sit in the test as a permanently-disabled rule.

Metadata

Metadata

Labels

documentationImprovements or additions to documentationenhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions