Skip to content

Fix color contrast - chart labels #56

@ckundo

Description

@ckundo

Problem

Chart labels (#1031, #1035, etc.) have insufficient contrast ratio of 2.26:1, failing WCAG AA requirement of 4.5:1.

Files to Update

  • CSS file (chart label styles)

Current Values

  • Color: rgb(160, 174, 192) (#a0aec0)
  • Background: rgb(255, 255, 255) (#ffffff)
  • Contrast Ratio: 2.26:1
  • Required: 4.5:1 for normal text

Tasks

  • Change chart label color from #a0aec0 to #637894
  • Verify new contrast ratio is 4.52:1 (passing)
  • Test visually to ensure readability

WCAG

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

Recommended Fix

.chart-label {
  color: #637894; /* Instead of #a0aec0 */
}

Expected Outcome

Chart labels are readable for users with low vision

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