AOSSIE-Org / AOSSIE-Org/Devr.AI

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

未關閉
#236 1 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
主要語言
Python
星號
102
分支
137
PR 合併指標
30 天內沒有已合併 PR

描述

## 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.

貢獻指南

這個儲存庫沒有索引到貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。