🐞[Bug]: Contact us page UI improvement #518
Description
Is there an existing issue for this?
- I have searched the existing issues
Description
The contact page form has poor text visibility in dark mode. Form labels like "Send us a message", field labels, and other text elements are not properly visible against the dark background, making the form unusable for users in dark mode.
Steps to Reproduce
- Navigate to the contact page (
/contact-us) - Switch to dark mode
- Observe the contact form section
Expected Behavior
- All form labels should be clearly visible with proper contrast
- Field labels like "First Name", "Last Name", "Email Address", "Subject", "Message" should be readable
- Form title "Send us a message" should be prominent and visible
- All text content should maintain accessibility standards for contrast ratios
Current Behavior
- Form labels appear very dim or invisible against dark background
- "Send us a message" heading is barely visible
- Field labels have poor contrast making them hard to read
- Overall form usability is severely impacted in dark mode
Affected Elements
- Form section heading "Send us a message"
- Input field labels: "First Name", "Last Name", "Email Address", "Subject", "Message"
- Form description text
- Any additional form-related text content
Environment
- Browser: All browsers
- Theme: Dark mode
- Page: Contact Us (
/contact-us)
Suggested Solution
- Update text colors for dark mode using proper contrast ratios
- Implement consistent dark mode styling for form elements
- Use dark input backgrounds (
#1f2937) with light text (#ffffff) - Add subtle form container styling with dark theme
- Ensure all labels use bright colors (
#ffffffor#e5e7eb) for visibility
Screenshot
What browsers are you seeing the problem on?
Chrome
Record
- I have read the Contributing Guidelines
- Are you a GSSOC'25 contributor
- I want to work on this issue
Metadata
Metadata
Assignees
Labels
Type
Projects
Status