BUG:UI Contrast Issue in Cards on Main Page

[shantanu020]

Is there an existing issue for this?

• [X] I have searched the existing issues

What happened?

Description: I’ve noticed a UI issue on the main page where the contrast between the text and background in the cards (Travel, Hotel, Fly) is quite low. This makes the text hard to read, especially for users with visual impairments or when viewed in different lighting conditions. It could be improved to enhance accessibility and readability.

Steps to Reproduce:

Visit the main page. Scroll to the section with the “Travel,” “Hotel,” and “Fly” cards. Observe the light text on a light background, especially in the card descriptions. Expected Behavior: The text should be easily readable with higher contrast, ensuring that both the card titles and descriptions stand out. The color of the text should have a significant contrast difference from the background, following WCAG 2.1 contrast guidelines.

Observed Behavior: The light-colored text on the cards blends into the background, reducing readability.

Record

• [X] I agree to follow this project's Code of Conduct
• [X] I'm a GSSOC'24 contributor
• [X] I want to work on this issue

[github-actions[bot]]

Thank you for creating this issue! 🎉 Your issue will soon be reviewed by either the PA or a mentor. Please note that Level 1 is temporary and can be changed during the review. In the meantime, please make sure to provide all the necessary details and context. If you have any questions or additional information, feel free to add them here. Your contributions are highly appreciated! 😊

You can also check our CONTRIBUTING.md for guidelines on contributing to this project.

[github-actions[bot]]

Thanks for creating the issue in BuddyTrail! Before you start working on your PR, please make sure to:

• ⭐ Star the repository if you haven't already.
• Pull the latest changes to avoid any merge conflicts.

• Attach before & after screenshots in your PR for clarity.

  • Include the issue number in your PR description for better tracking. Don't forget to follow @PriyaGhosal – Project Admin – for more updates!

  We're excited to see your contribution as part of GSSOC Extended Edition 2024 and Hacktoberfest! 🎉
  Happy open-source contributing!

[shantanu020]

Suggested Solution:

Increase Contrast: Darken the text or adjust the background to create a clearer visual distinction. Alternative Color Schemes: Consider using bolder colors for titles and descriptions or applying a gradient overlay behind the text. Use CSS for Text Shadow: Adding a subtle shadow effect can also help improve readability without changing the color scheme significantly.