Skip to content

fix: resolve WCAG AA color contrast violations#301

Merged
tomasz-tomczyk merged 1 commit intomainfrom
fix/color-contrast-wcag
Apr 18, 2026
Merged

fix: resolve WCAG AA color contrast violations#301
tomasz-tomczyk merged 1 commit intomainfrom
fix/color-contrast-wcag

Conversation

@tomasz-tomczyk
Copy link
Copy Markdown
Owner

Summary

  • Fix 200 color contrast violations (126 dark, 74 light) to meet WCAG AA (4.5:1 text, 3:1 UI components)
  • Replace GitHub Dark Dimmed hljs with Tokyo Night Dark hljs for palette coherence
  • Bump --fg-muted and --fg-dimmed for readable toggle buttons and gutter numbers
  • Reduce diff word-highlight opacities to preserve syntax color contrast
  • Add missing hljs selectors to light theme to prevent dark theme color leaking
  • Re-enable color-contrast axe-core rule + add dark theme accessibility test

Review

  • Both themes pass axe-core color-contrast with 0 violations
  • Theme and syntax-highlighting E2E tests pass
  • All 4 theme blocks consistent

Test plan

  • npx playwright test tests/accessibility.spec.ts — passes both light and dark
  • npx playwright test tests/theme.spec.ts tests/syntax-highlighting.spec.ts — 12/12 pass
  • Manual visual check via make test-diff

Closes #274
See also: tomasz-tomczyk/crit-web#90 — parity follow-up

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tomasz-tomczyk tomasz-tomczyk merged commit 3276924 into main Apr 18, 2026
4 checks passed
@tomasz-tomczyk tomasz-tomczyk deleted the fix/color-contrast-wcag branch April 18, 2026 08:19
tomasz-tomczyk added a commit that referenced this pull request Apr 20, 2026
…engthen CSS guardrails

The WCAG fix (#301) introduced a regression: --fg-on-accent was removed from
[data-theme="light"], causing btn-primary text to be unreadable (dark navy on
dark blue) when users explicitly select Light theme.

Also removes dead --btn-primary-bg/fg/border vars (defined but never
referenced) and dead --bg-gutter var found by the strengthened script.

Strengthens check-css-vars.sh with two new checks:
- Dead definitions: vars defined but never referenced via var()
- 4-block completeness: theme vars must appear in all 4 theme blocks

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
tomasz-tomczyk added a commit that referenced this pull request Apr 20, 2026
…engthen CSS guardrails (#315)

The WCAG fix (#301) introduced a regression: --fg-on-accent was removed from
[data-theme="light"], causing btn-primary text to be unreadable (dark navy on
dark blue) when users explicitly select Light theme.

Also removes dead --btn-primary-bg/fg/border vars (defined but never
referenced) and dead --bg-gutter var found by the strengthened script.

Strengthens check-css-vars.sh with two new checks:
- Dead definitions: vars defined but never referenced via var()
- 4-block completeness: theme vars must appear in all 4 theme blocks

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix: color contrast violations (WCAG AA)

1 participant