OWASP / OWASP/Nest

fix(a11y): Correct color contrast for WCAG compliance in multiple components

Open
#3,797 4 comments 0 reactions 1 assignee Claimed by @Srizdebnath View on GitHub
bug enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.