Skip to content

a11y: Welcome/Home dashboard contrast fails WCAG AA under light/sepia appearance states #565

Description

@qnbs

Context

A required Playwright gate on PR #564 (docs(core): define R-15 secure storage contract) exposed a concrete product accessibility defect unrelated to the S5 documentation diff.

This is a focused defect split from the cross-surface accessibility umbrella #557, whose policy explicitly says concrete accessibility defects should receive dedicated issues.

It is also distinct from #532: the same CI run contained a WelcomePortal startup/harness flake, but the final job-blocking failure was a deterministic Axe color-contrast violation in tests/e2e/a11y.spec.ts.

Current evidence

PR: #564
Exact PR head: 0865895f2c3070b8923556f61134013a0d077eba
CI/CD run: 33488629878 / #2571
Playwright job: 99798975581
Test: tests/e2e/a11y.spec.ts:26Accessibility (axe) › welcome / home has no serious axe violations

The test failed on the initial attempt and both Playwright retries with serious color-contrast violations. The run ended with:

1 failed
1 flaky
9 skipped
119 passed

The flaky test was the separate #532 WelcomePortal-entry precondition. The final failure remained the Axe accessibility test.

Representative failing nodes

Observed effective contrast ratios included:

Last edited: Chapter 1            4.28:1  (expected >= 4.5:1)
Words                              4.02:1
Characters                         2.66:1
Worlds                             1.14:1
Good morning                       4.37:1
No logline yet...                  4.45:1
words                              4.03:1
Last edited: Chapter 1             3.49:1
Outline Sections                   2.11:1

The failing elements use semantic appearance tokens such as:

--sc-text-muted
--sc-text-secondary
--sc-accent
--sc-surface-base

with several backgrounds in a light/sepia-like palette (for example #f1e9d3, #f2ead5, #f4ecd7). Decorative translucent/blurred layers also appear in Axe's effective-background chain.

Because the exact failing nodes vary between retries while the accessibility failure persists, appearance/theme state and layered effective backgrounds should be inspected rather than patching only one literal element.

Classification

CURRENT_PRODUCT_DEFECT = YES
S5_R15_RELATION = NONE
#564_SOURCE_CAUSATION = NO EVIDENCE
#532_RELATION = SEPARATE FLAKY STARTUP/HARNESS SIGNAL IN SAME RUN
#557_RELATION = UMBRELLA / ACCEPTANCE OWNER

Do not fix this inside PR #564.

Investigation / acceptance

  • Reproduce the Welcome/Home Axe scan deterministically across every currently supported appearance/theme combination relevant to the dashboard.
  • Identify which semantic token/background combinations fall below WCAG AA for normal text.
  • Account for translucent surfaces, accent glows and layered backgrounds when calculating effective contrast.
  • Fix semantic tokens or component usage at the narrowest correct authority; avoid one-off hard-coded color patches where a shared token is the real owner.
  • Ensure all serious/critical Axe violations in the Welcome/Home journey are zero.
  • Require normal-text contrast >= 4.5:1 for affected nodes.
  • Verify the fix under Chromium CI and relevant appearance states without weakening Axe rules, retries or thresholds.
  • Add/strengthen deterministic regression coverage so a docs-only PR cannot rediscover the same product defect.
  • Reconcile the resulting evidence back into a11y: establish cross-surface accessibility acceptance matrix for editor, PWA and native renderers #557's cross-surface accessibility matrix.

Non-goals

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions