FreeTubeApp
[Bug]: catppuccinMocha: Color contrast for owner comments is too low
Guidelines
- [x] I have encountered this bug in the latest release of FreeTube.
- [x] I have encountered this bug in the official downloads of FreeTube.
- [x] I have searched the issue tracker for open and closed issues that are similar to the bug report I want to file, without success.
- [x] I have searched the documentation for information that matches the description of the bug I want to file, without success.
- [x] This issue contains only one bug.
Describe the bug
- Go to settings and set base theme to Catppuccin Mocha
- Go to any video with comments from the uploader, e.g. https://youtu.be/IKbFBgNuEOU
- Observe the color highlight around the uploader's username (see https://github.com/FreeTubeApp/FreeTube/pull/1795)
- Switch to any other theme (e.g. Light or Dark)
- Note the much more pronounced color contrast for the username highlight.
Expected Behavior
A clear label for an uploader's comment, no matter the theme used. This is important for accessibility.
Issue Labels
accessibility issue
FreeTube Version
v0.22.1
Operating System Version
Windows 10 22H2
Installation Method
.exe
Primary API used
Local API
Last Known Working FreeTube Version (If Any)
No response
Additional Information
See https://webaim.org/resources/contrastchecker/?fcolor=1E1E2E&bcolor=181825, a contrast ratio of 1.07:1 is much too low. A rule of thumb is at least 4.5:1 for proper legilibility.
The relevant CSS properties are card-bg-color and secondary-card-bg-color for .catppuccinMocha
Screenshots:
Catppuccin Mocha:
Dark theme:
Nightly Build
- [ ] I have encountered this bug in the latest nightly build.
Hi everyone,
I’ve worked on the color contrast issue for the uploader’s comments in the Catppuccin Mocha theme (#6597). I’ve made adjustments to the CSS to ensure the contrast ratio is improved for better readability and accessibility. Specifically, I modified the colors related to the uploader's username highlight, making it more distinguishable against the background.
I’ve tested the changes locally on macOS 11 and can confirm that the contrast is now more pronounced, meeting the accessibility standards. You can find the relevant pull request here: https://github.com/FreeTubeApp/FreeTube/pull/6603.
Looking forward to your feedback, and let me know if further adjustments are needed.
Thank you!
While I am grateful to @nanikh91, since the PR is stale, I'd like to work on it myself and try to fix the contrast (assuming no new commits or other PRs wish to address this issue).
Title: [Fix]: Improved Color Contrast for Uploader Comments in Catppuccin Mocha Theme
Description: Hi everyone,
I’ve worked on resolving the color contrast issue for the uploader’s comments in the Catppuccin Mocha theme (#6597). I made adjustments to the CSS to improve the contrast ratio, ensuring better readability and accessibility for users on Windows. Specifically, I modified the colors related to the uploader's username highlight to make it more distinguishable against the background.
Here are the key updates:
The color contrast ratio has been improved to meet accessibility standards (4.5:1 and above). I changed two colors for the uploader’s comment text and username to achieve this. I’ve tested the changes locally on Windows and can confirm that the contrast is now more pronounced and meets the required accessibility guidelines. You can review the changes in the following pull requests:
#7025 #7026 Please feel free to provide any feedback or let me know if further adjustments are needed.
Thank you!
@artkapl do you have trouble implementing the requested changes in your PR?
@DontBlameMe99 would you like to take a stab at this one?
The comments over in https://github.com/FreeTubeApp/FreeTube/pull/6896 could give you some more guidance
@efb4f5ff-1298-471a-8973-3d47447115dc I might be able to in the future but currently (at least this week) my time is pretty limited.
