openclaw/openclaw.ai
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.ai.git synced 2026-07-15 12:25:40 -04:00
Code Issues 7 Packages Projects Releases Wiki Activity

[PR #34] [CLOSED] fix: resolve WCAG AA color contrast violations #39

New Issue
Closed
opened 2026-02-15 17:17:22 -05:00 by yindo · 0 comments
yindo commented 2026-02-15 17:17:22 -05:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/openclaw/openclaw.ai/pull/34
Author: @huangkevin-apr
Created: 1/31/2026
Status: ❌ Closed

Base: main ← Head: fix-a11y-contrast

📝 Commits (1)

  • 810b675 Fix WCAG AA Color Contrast Violations

📊 Changes

2 files changed (+8 additions, -9 deletions)

View changed files

📝 src/layouts/Layout.astro (+1 -1)
📝 src/pages/index.astro (+7 -8)

📄 Description

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 white → var(--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

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/openclaw/openclaw.ai/pull/34 **Author:** [@huangkevin-apr](https://github.com/huangkevin-apr) **Created:** 1/31/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `fix-a11y-contrast` --- ### 📝 Commits (1) - [`810b675`](https://github.com/openclaw/openclaw.ai/commit/810b6750c2c631edb64563c5eca56b2e52ef87d8) Fix WCAG AA Color Contrast Violations ### 📊 Changes **2 files changed** (+8 additions, -9 deletions) <details> <summary>View changed files</summary> 📝 `src/layouts/Layout.astro` (+1 -1) 📝 `src/pages/index.astro` (+7 -8) </details> ### 📄 Description ## 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. <img width="2560" height="921" alt="image" src="https://github.com/user-attachments/assets/9ba9d6db-04b2-4fb7-a988-eec3435c1f14" /> **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` 2. 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 3. Removed Opacity Overlay - Location: Footer disclaimer (`.footer .disclaimer`) - Change: Removed `opacity: 0.7` which further reduced contrast - Benefit: Ensures consistent contrast without transparency interference 4. Enhanced Badge Contrast - Changed: Badge text color from `white` → `var(--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 <img width="1920" height="2497" alt="1" src="https://github.com/user-attachments/assets/8189daf3-bfb8-4a40-8ae1-caeb178cef7a" /> **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} ``` <img width="1920" height="2878" alt="http%3A%2F%2Flocalhost%3A4321%2F" src="https://github.com/user-attachments/assets/bd941e84-1d7f-4aac-b5f5-790f51e50bc1" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-02-15 17:17:22 -05:00
yindo closed this issue 2026-02-15 17:17:22 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: openclaw/openclaw.ai#39
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?