Skip to content

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

@raffelino

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

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationenhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions