fix(a11y): Correct color contrast for WCAG compliance in multiple components
- Dominant language
- Python
- Stars
- 451
- Forks
- 707
- Avg merge
- 22h 59m
- Merged PRs (30d)
- 91
Description
### 🐛 Bug Report
**1. Problem Description**
The application currently has several components where the text color does not have a sufficient contrast ratio against the background color, failing WCAG AA accessibility standards. This was identified using Lighthouse and axe DevTools during an accessibility audit. This makes content difficult to read for users, especially those with visual impairments.
**2. Root Cause & Failing Patterns**
The issue stems from a few common Tailwind CSS patterns used across the site:
* **Light Mode:** `text-gray-600` used on a `bg-gray-200` background.
* **Dark Mode:** `dark:text-gray-400` used on a `dark:bg-gray-700` background.
* **Dark Mode Links:** `text-blue-400` used on a `dark:bg-gray-700` background.
**3. Affected Components**
These patterns are primarily found in:
* Event Cards
* Project/Chapter List Items
* General info cards and links throughout the site.
**4. Proposed Solution**
To meet the WCAG AA contrast ratio of at least 4.5:1, I will make the following targeted changes to the color palette:
1. **For gray text:**
* Change `text-gray-600` to a darker shade like **`text-gray-800`**.
* Change `dark:text-gray-400` to a lighter shade like **`dark:text-gray-200`**.
2. **For blue links:**
* Change `text-blue-400` to a lighter, more vibrant shade like **`text-blue-300`** in dark mode, or adjust the background.
**5. Verification**
After implementing the changes, I will verify the fix by:
1. Re-running the Lighthouse accessibility audit to ensure the score improves and the contrast errors are resolved.
2. Using a color contrast checker in browser DevTools to confirm the new ratios meet the 4.5:1 standard.
---
*This issue was created as part of the accessibility audit for Winter of Code 5.0.*
Contributor guide
Assessment
This issue has not been assessed yet.