Skip to content

fix(theme): improve accent color contrast in light default theme for WCAG AA compliance #609

Description

@ZhuchkaTriplesix

Problem

In lib/core/theme/querya_workbench_theme.dart, the lightDefault theme preset specifies:

accent: QueryaColors.accentCyan, // #22D3EE

While #22D3EE achieves excellent contrast on dark backgrounds (12.78:1), against the light theme's white surface (#FFFFFF) it yields a contrast ratio of only 1.64:1. This violates WCAG 2.1 AA accessibility guidelines (minimum 4.5:1 for text/icons).

Proposed Solution

  • Update lightDefault in querya_workbench_theme.dart to use an accessible, high-contrast cyan/teal accent tone (e.g. Color(0xFF0891B2) / Cyan-600 with 4.62:1 contrast ratio against #FFFFFF).
  • Ensure dark theme continues using QueryaColors.accentCyan (#22D3EE).
  • Add unit tests in test/core/theme/color_contrast_test.dart validating that both darkDefault and lightDefault satisfy WCAG 2.1 AA/AAA contrast minimums.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingthemeTheming, colors, VS Code themes

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions