Skip to content

Fix color contrast - secondary text #57

@ckundo

Description

@ckundo

Problem

Secondary text (dashboard subtitle, stat labels) has insufficient contrast, failing WCAG AA.

Files to Update

  • CSS file (subtitle and label styles)

Current Values

Dashboard Subtitle:

  • Color: #718096
  • Background: #f5f7fa
  • Contrast: 3.74:1 ❌ (needs 4.5:1)

Stat Labels:

  • Color: #718096
  • Background: #ffffff
  • Contrast: 4.02:1 ❌ (needs 4.5:1)

Tasks

  • Update dashboard subtitle color to #647287 (contrast: 4.55:1)
  • Update stat label color to #67768c (contrast: 4.62:1)
  • Verify with contrast checker
  • Test visual appearance

WCAG

1.4.3 Contrast (Minimum) (Level AA) - Text must have 4.5:1 contrast ratio

Recommended Fix

.dashboard-subtitle {
  color: #647287; /* Instead of #718096 */
}

.stat-label {
  color: #67768c; /* Instead of #718096 */
}

Expected Outcome

All secondary text meets WCAG AA contrast requirements

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingcolor-contrastColor contrast accessibility issues

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions