Skip to content

Conversation

@huangkevin-apr
Copy link

Issue Description

This PR fixes multiple WCAG AA color contrast violations identified by the IBM Equal Access Accessibility Checker. Contrast violation can be difficult for people with moderately low vision to read the text without contrast-enhancing technology. The changes improve text readability and ensure the website meets accessibility standards.

image

The accessibility audit revealed 20 contrast violations where text contrast ratios failed to meet WCAG AA minimum requirements (4.5:1 for normal text, 3:1 for large text). These issues affected:

  • Brand/secondary text color ($lm-brand-color)
  • Hyperlink text color ($lm-link-base-color)

The violation elements as shown in this screenshot:

1

Fix Description

Updated color values in _sass/minima/_skin.scss:

Brand color: Changed from #828282 to #585858 (darker gray)
Link color: Changed from#2a7ae2 to #185ea9 (darker blue)

These adjustments ensure all text elements meet WCAG AA contrast requirements while maintaining the overall design aesthetic.

Testing

✅ Verified with IBM Equal Access Accessibility Checker
✅ All 20 contrast violations resolved
✅ Visual inspection confirms colors remain visually appealing
✅ No breaking changes to layout or functionality

Fix Before: 20 contrast violations
image

Fix After: All contrast issues resolved
image

Additional Info

The patch submitted in this PR was generated by A11YRepair, an automated Web Accessibility repair tool that I developed to address common accessibility violations in web applications. The generated fixes were manually reviewed and validated before submission.

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.

1 participant