AOSSIE-Org / AOSSIE-Org/Devr.AI

[UI/UX] Improve Dark Mode Contrast and Accessibility for Data Components

Abierto
#236 1 comentario 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
Python
Estrellas
102
Forks
137
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

## Issue Description

### Description

While the application supports a dark theme, several UI elements (specifically data tables, cards, and input placeholders) lack sufficient color contrast. This makes the interface difficult to read for users with visual impairments and creates an inconsistent aesthetic experience when switching themes.

---

### Impact

Improving color contrast ensures the project meets WCAG 2.1 accessibility standards. It makes the platform more inclusive and reduces eye strain for developers working in low-light environments.

---

### Proposed Changes

I propose a "UI Polish" pass to fix the following specific areas:

- Placeholder Contrast: Increase the contrast ratio of text placeholders in input fields (currently too faint in dark mode).
- Card Borders: Add subtle border-colors to dashboard cards in dark mode to distinguish them from the background.
- Table Row Hover States: Update the hover effect on data rows so that the highlight color doesn't "wash out" the text.
- Accessibility Check: Ensure all primary action buttons maintain a contrast ratio of at least 4.5:1 against the background.

---

### Technical Implementation Suggestion

- Locate the global CSS/SASS variables or the Tailwind configuration file.
- Adjust the hex or rgba values for dark-mode specific tokens (e.g., --bg-card-dark, --text-placeholder-dark).
- Use a tool like the "Lighthouse" Chrome extension or "Axe DevTools" to identify specific elements with low contrast and fix them.

---

### Verification Plan

- Use the browser's "Inspect Element" tool to verify the contrast ratio of updated elements.
- Toggle between Light and Dark modes to ensure no "flicker" of unstyled content or hard-to-read text remains.

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.