[Bug]: catppuccinMocha: Color contrast for owner comments is too low

[artkapl]

Guidelines

• I have encountered this bug in the latest release of FreeTube.
• I have encountered this bug in the official downloads of FreeTube.
• I have searched the issue tracker for open and closed issues that are similar to the bug report I want to file, without success.
• I have searched the documentation for information that matches the description of the bug I want to file, without success.
• This issue contains only one bug.

Describe the bug

1. Go to settings and set base theme to Catppuccin Mocha
2. Go to any video with comments from the uploader, e.g. https://youtu.be/IKbFBgNuEOU
3. Observe the color highlight around the uploader's username (see Feature: Add pinned, owner and reply from owner indicators for comments #1795)
4. Switch to any other theme (e.g. Light or Dark)
5. 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.

[nanikh91]

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: #6603.

Looking forward to your feedback, and let me know if further adjustments are needed.

Thank you!

[artkapl]

Love it, thank you! :)

[artkapl]

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).

[efb4f5ff-1298-471a-8973-3d47447115dc]

go for it!

[akrem023]

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!

[efb4f5ff-1298-471a-8973-3d47447115dc]

@artkapl do you have trouble implementing the requested changes in your PR?