AOSSIE-Org / AOSSIE-Org/Devr.AI

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

オープン
#236 コメント 1 件 リアクション 0 件 担当者 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 を短くまとめたダイジェスト。