Skip to content

Bad text contrast on home page of the buttons are now fixed#99

Merged
ntur101 merged 1 commit intoSofteng310:mainfrom
Minseo421:feature/homepage-bad-contrast
Oct 19, 2025
Merged

Bad text contrast on home page of the buttons are now fixed#99
ntur101 merged 1 commit intoSofteng310:mainfrom
Minseo421:feature/homepage-bad-contrast

Conversation

@Minseo421
Copy link
Copy Markdown
Collaborator

📌 Description

This PR fixes a visibility issue in the “Ready to Get Started” section where the button text became unreadable when hovered.
Previously, the text color changed to white on a white background, making the buttons appear blank and reducing accessibility.
This update adjusts the hover state styling to ensure proper contrast between text and background, improving readability and UI consistency.

What does this PR do?
Fixes the hover text visibility issue on buttons in the "Ready to Get Started" module.

Why is it needed?
The previous hover state made button text invisible (white on white), which negatively impacted usability and accessibility.

🔗 Related Issue(s)

Closes #97

✅ Changes

  • Major functionality added
  • [✅] Bug fix
  • Refactor
  • Documentation update
  • Other (please describe):

🧪 How to Test

  1. Navigate to the “Ready to Get Started” module in the frontend.
  2. Hover over each button.
  3. Confirm that the text remains clearly visible against the background.
  4. Verify that the hover style (color/contrast) is consistent across all buttons.

Copilot AI review requested due to automatic review settings October 19, 2025 09:54
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes a critical accessibility and usability issue in the "Ready to Get Started" section where button text became invisible on hover due to poor color contrast (white text on white background). The fix changes the hover state to use a light emerald background with darker emerald text, ensuring proper readability and maintaining visual consistency.

  • Updated hover styling from white-on-emerald to emerald-on-light-emerald for better contrast
  • Added active state styling for improved user feedback
  • Enhanced accessibility compliance by ensuring readable text contrast ratios

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@sonarqubecloud
Copy link
Copy Markdown

Copy link
Copy Markdown
Collaborator

@ntur101 ntur101 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!! love the changes

@ntur101 ntur101 merged commit a0f1c13 into Softeng310:main Oct 19, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Bad text contrast on home page

3 participants