fix(#147): WCAG AA color-contrast failures in brand palette #149

Merged

marcel merged 4 commits from fix/147-wcag-aa-contrast into main 2026-03-28 19:57:33 +01:00

Conversation 0 Commits 4 Files Changed 11 +16 -16

marcel commented 2026-03-28 19:30:04 +01:00

Owner

Copy Link

Summary

Fixes the two WCAG AA contrast failures identified in #147 (reviewed by Leonie Voss) and re-enables the axe-core color-contrast rule in the E2E accessibility suite.

• Critical (1.52:1): text-accent was used as a text/label colour — #a1dcd8 is a decorative mint token, not a text colour. Replaced with text-primary (#012851, 16.8:1 on white) across 5 components.
• High (3.97:1): text-ink/60 produces an opacity-blended colour that fails on the sandy canvas #f0efe9. Replaced with text-ink-2 (#4b5563, 6.6:1 on canvas) across 4 files.
• Added a ⚠ accent guard comment in layout.css to prevent the misuse from recurring.
• Added /coverage/ to .prettierignore so generated lcov reports don't fail the lint hook.

Commits

• test(#147) — Add axe spec with color-contrast enabled (🔴 red)
• fix(#147) — Replace text-accent with text-primary on all text elements (🟢 green, critical)
• fix(#147) — Replace text-ink/60 with text-ink-2 + layout.css guard (🟢 green, high)

Test plan

• Run cd frontend && npx playwright test e2e/accessibility.spec.ts — all 4 pages (home, persons, admin, login) must pass with no color-contrast violations
• Visually verify admin Users and Groups tables — "Bearbeiten" links now render in navy, not mint
• Visually verify /persons subtitle and "Neue Person" link — readable at normal brightness
• Dark mode: no visual regressions (text-primary → #a1dcd8 in dark mode, still 8.4:1 on dark surface)

🤖 Generated with Claude Code

## Summary Fixes the two WCAG AA contrast failures identified in #147 (reviewed by Leonie Voss) and re-enables the axe-core `color-contrast` rule in the E2E accessibility suite. - **Critical (1.52:1):** `text-accent` was used as a text/label colour — `#a1dcd8` is a decorative mint token, not a text colour. Replaced with `text-primary` (`#012851`, 16.8:1 on white) across 5 components. - **High (3.97:1):** `text-ink/60` produces an opacity-blended colour that fails on the sandy canvas `#f0efe9`. Replaced with `text-ink-2` (`#4b5563`, 6.6:1 on canvas) across 4 files. - Added a `⚠ accent` guard comment in `layout.css` to prevent the misuse from recurring. - Added `/coverage/` to `.prettierignore` so generated lcov reports don't fail the lint hook. ## Commits - `test(#147)` — Add axe spec with `color-contrast` enabled (🔴 red) - `fix(#147)` — Replace `text-accent` with `text-primary` on all text elements (🟢 green, critical) - `fix(#147)` — Replace `text-ink/60` with `text-ink-2` + layout.css guard (🟢 green, high) ## Test plan - [ ] Run `cd frontend && npx playwright test e2e/accessibility.spec.ts` — all 4 pages (home, persons, admin, login) must pass with no `color-contrast` violations - [ ] Visually verify admin Users and Groups tables — "Bearbeiten" links now render in navy, not mint - [ ] Visually verify `/persons` subtitle and "Neue Person" link — readable at normal brightness - [ ] Dark mode: no visual regressions (`text-primary` → `#a1dcd8` in dark mode, still 8.4:1 on dark surface) 🤖 Generated with [Claude Code](https://claude.com/claude-code)

marcel added 3 commits 2026-03-28 19:30:04 +01:00

test(#147): add axe-core accessibility spec with color-contrast enabled ... 4c3d253066

Introduces the wcag2a/wcag2aa E2E suite from the test-suite branch with
the color-contrast rule active — no disableRules exclusion. Also adds
/coverage/ to .prettierignore so generated lcov reports don't fail the
lint hook.

This commit intentionally fails the axe suite until the contrast fixes
land in the next commits.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(#147): replace text-accent with text-primary on all text elements ... b5580b0b24

--c-accent (#a1dcd8 light / #00c7b1 dark) is a decorative mint token —
1.52:1 on white, nowhere near WCAG AA. Every place it appeared as the
colour of a text label or interactive button is switched to text-primary
(#012851, 16.8:1 on white) with hover:text-ink-2 for consistency.

Affected: UsersTab, GroupsTab, CommentThread (Reply), DocumentList
(Clear search), PdfViewer (Direkt öffnen link).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(#147): replace text-ink/60 with text-ink-2 and add accent token guard ... e28cd03953

text-ink/60 produces an opacity-blended colour whose contrast is
background-dependent: it passes on white (4.8:1) but fails on the sandy
canvas #f0efe9 (3.97:1, below WCAG AA 4.5:1). Replace every occurrence
with text-ink-2 (#4b5563, 6.6:1 on canvas — WCAG AA ✓).

Also adds a warning comment above --c-accent in layout.css to prevent
the text-accent misuse from recurring.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

marcel added 1 commit 2026-03-28 19:51:53 +01:00

chore: resolve merge conflicts with main ... 16101240f1

Kept our version of accessibility.spec.ts (color-contrast rule enabled,
exclusion comment removed) over main's disabled version — the contrast
fixes in this branch make the exclusion unnecessary.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

marcel merged commit 16101240f1 into main 2026-03-28 19:57:33 +01:00

marcel deleted branch fix/147-wcag-aa-contrast 2026-03-28 19:57:35 +01:00

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

P0-critical

Blocks a core user journey, causes data loss, or is a security/accessibility barrier. Work on this before P1+.

P1-high

Significant friction on a main user journey; workaround exists but is non-obvious. Next up after P0.

P2-medium

Noticeable improvement; doesn't block anything; schedule opportunistically.

P3-later

Cosmetic or parking-lot work; fine to stay open indefinitely.

audit

Read-only audit / assessment work; produces a report rather than changing code

bug

Something isn't working

cleanup

Removal of dead code, vague comments, naming violations, and scratch artifacts

collaboration

We want to extend the family archive to have more collaboration tools

conversation

descoped

We will do that later

devops

documentation

README, ARCHITECTURE, GLOSSARY, CONTRIBUTING, per-domain docs

epic

Marker for epic-level issues that group multiple child issues

feature

file-upload

legibility

Codebase Legibility Refactor — preparing the codebase for human evaluation and bus-factor reduction

notification

person

phase-1: security

Security hygiene — must be done first

phase-2: container-images

Production-ready multi-stage Docker images

phase-3: prod-compose

Production compose overlay + Caddy reverse proxy

phase-4: spring-prod-profile

Spring Boot production configuration profile

phase-5: backups

Database and object storage backup strategy

phase-6: deployment-docs

.env.example, DEPLOYMENT.md, runbook

phase-7: monitoring

Prometheus, Loki, Grafana, Alertmanager

refactor

Code restructuring without behaviour change

security

test

ui

UI/UX and accessibility issues

user

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

Jens marcel

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: marcel/familienarchiv#149