[UI/UX] Improve Dark Mode Contrast and Accessibility for Data Components #236
Description
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.