Improve Visibility of Light Fonts with Hover Bubble-Out Screen

[khusiie]

Describe the feature

We need to enhance the visibility of light fonts in our application to ensure they are easily readable for all users. The current light font colors are causing readability issues, especially on certain background colors. This improvement aims to adjust the color contrast and potentially modify the font weight to make the text more legible. Additionally, we will introduce a bubble-out screen that appears when the user hovers over areas with light fonts, providing a clearer view of the text. This will enhance the overall user experience and accessibility of the application.

Requirements:

Identify all instances where light fonts are used.
Increase the contrast between the text and background colors.
Consider changing the font weight or style if necessary.
Implement a bubble-out screen that appears on hover, displaying the text in a more
readable format.
Ensure the changes comply with accessibility standards (e.g., WCAG).
Test the changes across different devices and screen resolutions.

Here’s an updated version of the feature request that includes the addition of a hover effect with a bubble-out screen:

Feature Request: Improve Visibility of Light Fonts with Hover Bubble-Out Screen

Description:
We need to enhance the visibility of light fonts in our application to ensure they are easily readable for all users. The current light font colors are causing readability issues, especially on certain background colors. This improvement aims to adjust the color contrast and potentially modify the font weight to make the text more legible. Additionally, we will introduce a bubble-out screen that appears when the user hovers over areas with light fonts, providing a clearer view of the text. This will enhance the overall user experience and accessibility of the application.

Requirements:

Identify all instances where light fonts are used.
Increase the contrast between the text and background colors.
Consider changing the font weight or style if necessary.
Implement a bubble-out screen that appears on hover, displaying the text in a more readable format.
Ensure the changes comply with accessibility standards (e.g., WCAG).
Test the changes across different devices and screen resolutions.

Acceptance Criteria:

Light fonts should be easily readable on all background colors.
The bubble-out screen should display clearly and enhance text readability upon hover.
The application should pass accessibility checks for color contrast.
No negative impact on the overall design and aesthetic of the application.

Add ScreenShots

Record

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