Fix low color contrast to meet WCAG accessibility standards #634
Description
⚙️ Current Behavior
The login screen uses light pink text and button labels on a very light pink background.
This results in low color contrast, making text difficult to read for many users.
The UI currently fails WCAG 2.1 AA accessibility contrast standards, especially for users with low vision or color blindness.
🚀 Proposed Improvement
Update the text, placeholder, and button colors to use higher-contrast shades while maintaining the existing pink theme.
Ensure that all text meets minimum contrast ratios:
4.5:1 for normal text
3:1 for large text and buttons
🔍 Why It’s Needed
Accessibility compliance is essential for any public and open-source project.
Low contrast reduces readability, increases eye strain, and prevents users with visual impairments from using the application effectively.
Fixing this improves inclusivity, usability, and overall UI quality.
🧩 Possible Implementation
Replace current light pink text (#f48fb1) with a darker pink (#ad1457)
Darken button text and borders
Validate contrast using WCAG contrast checkers (e.g., WebAIM Contrast Checker)
Update CSS variables for easy theme control
Example:
:root {
--primary-text: #ad1457;
--button-text: #ffffff;
--button-bg: #c2185b;
}