Skip to content

Conversation

@huangkevin-apr
Copy link

Summary

This PR addresses 19 accessibility violations detected by IBM A11Y Checker related to insufficient color contrast ratios. All changes ensure text elements meet WCAG AA requirements for contrast against their backgrounds.

Problem

The IBM A11Y Checker identified multiple instances where text contrast ratios failed to meet WCAG AA standards (minimum 4.5:1 for normal text, 3:1 for large text). These violations impact readability and accessibility for users with visual impairments or color vision deficiencies.
image

Why is this important?
When text and its background colors have less than a 4.5 to 1 contrast ratio it can be difficult for people with moderately low vision to read the text without contrast-enhancing technology. For larger text of 18 point or more or bold 14 point text, the text and background colors must give at least a 3 to 1 contrast ratio.

Solution

Updated color values throughout the codebase to improve contrast ratios:

  1. Enhanced --text-muted Base Color
  • Changed: #5a6480#96a1c0
  • Impact: Improved base contrast for muted text elements
  • Location: src/layouts/Layout.astro
  1. Upgraded Text Elements to --text-secondary
    Replaced several instances of --text-muted with --text-secondary for better visibility:
  • CTA subtitle text (.cta-sub)
  • Feature descriptions (.feature-desc)
  • Interactive button states (.pm-btn, .hackable-btn, .os-btn, .win-shell-btn)
  • Installation option buttons (.install-option)
  • Footer disclaimer text
  1. Removed Opacity Overlay
  • Location: Footer disclaimer (.footer .disclaimer)
  • Change: Removed opacity: 0.7 which further reduced contrast
  • Benefit: Ensures consistent contrast without transparency interference
  1. Enhanced Badge Contrast
  • Changed: Badge text color from whitevar(--bg-deep)
  • Impact: Improved contrast against coral-colored badge backgrounds
  • Location: .latest-badge

Testing

All changes have been validated to ensure:
✅ Text contrast ratios meet WCAG AA requirements
✅ Visual hierarchy remains clear and intentional

Fix Before: 19 Violations
1

Fix After: All 19 Violations have been resolved

{'http://localhost:4321/': {'issue': 43, 'repair': 24, 'solved_violations': 19, 'solved_rate': 0.4418604651162791, 'side_effects': 0, 'true_solves': 19}, 'RESULT': '19 / 43 = 44.19%', 'SIDE_EFFECTS': 0, 'TRUE_SOLVES': 19}
http%3A%2F%2Flocalhost%3A4321%2F

@vercel
Copy link

vercel bot commented Jan 31, 2026

@huangkevin-apr is attempting to deploy a commit to the Amantus Machina Team on Vercel.

A member of the Team first needs to authorize it.

@huangkevin-apr huangkevin-apr changed the title Fix WCAG AA Color Contrast Violations fix: resolve WCAG AA color contrast violations Jan 31, 2026
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.

2 participants