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:26 — Accessibility (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

Activity

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

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