Low Text Contrast in Roadmap Comparison Cards Reduces Readability in Dark Mode

[premitgithub]

Description

The roadmap comparison page contains skill tags and badges with insufficient color contrast in dark mode. Several badges use dark-colored text on similarly dark-colored backgrounds, making the content difficult to read.
This affects the readability and overall user experience, particularly for users viewing the site on low-brightness displays or in dark environments.

Steps to Reproduce

• Open the application.
• Navigate to the Compare page.
• Compare two roadmaps (e.g., React vs Angular).
• Scroll to the Side-by-Side Details and Skills Breakdown sections.
• Observe the skill tags and badges.

Expected Behavior

• Badge text should have sufficient contrast against its background.
• Skills and category labels should be easily readable in dark mode.
• The UI should follow accessibility best practices for color contrast.

Actual Behavior

• Several badges display dark blue or purple text on dark blue/purple backgrounds.
• Text becomes difficult to distinguish from the background.
• Readability is reduced, especially for users with visual impairments or lower screen brightness.

Impact

• Poor user experience in dark mode.
• Reduced accessibility and readability.
• Important roadmap information becomes harder to scan and compare.

Possible Solution

• Increase text contrast by using lighter text colors on dark badges.
• Adjust badge background colors to provide better separation from text.
• Review badge color combinations against WCAG contrast guidelines.
• Ensure consistent contrast across all roadmap comparison cards and skill tags.

Screenshot

The attached screenshot highlights examples of low-contrast badges in the roadmap comparison section where text visibility is reduced in dark mode.

Hi @komalharshita ,
I would like to work on this issue. I would want you to assign this issue to me.

[github-actions]

Thank you for opening your first issue in DevPath.

Please make sure to:

• Read CONTRIBUTING.md
• Wait for assignment before starting work
• Follow repository guidelines carefully

Happy contributing.

[YerraguntaAjayKumar]

/claim

[sayan-netizen]

I would like to contribute under GSSOC'26