Fix Color Contrast for Catppuccin Mocha card background

[artkapl]

Fix Color Contrast for Catppuccin Mocha card background

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

closes #6597

Description

I wanted to improve the color contrast for the background around the video uploader's name on an uploader's comment. Strong color contrasts are important for accessibility.

This PR improves the color contrast from 1.07:1 to 3.59:1 (link to contrast checker) while still staying within the Catppuccin Mocha color palette ("Overlay 0").

I considered this color a decent middleground between background contrast and text contrast. The text vs. secondary-card-bg contrast is still a clearly differentiated 3.37:1.

Screenshots

Before:

After:

Testing

• This was tested by changing the CSS code on a local FreeTube instance
• No ramifications (other themes remain unchanged)

Desktop

• OS: Windows
• OS Version: 10
• FreeTube version: v0.23.1 Beta

Additional context

This satisfies the WCAG recommendation of at least 3:1.

[kommunarr]

Thanks for looking into this!

I considered this color a decent middleground between background contrast and text contrast. The text vs. secondary-card-bg contrast is still a clearly differentiated 3.37:1.

Unfortunately, this will not suffice because the minimum acceptable color contrast between a text color and its background color is 4.5:1 or 7:1 (depending on whether WCAG AA or AAA standard is being used).

[artkapl]

Unfortunately, this will not suffice because the minimum acceptable color contrast between a text color and its background color is 4.5:1 or 7:1 (depending on whether WCAG AA or AAA standard is being used).

I hear you. However, there is a tradeoff between background contrast and text contrast.
If we were to use blue (the Catppuccin recommendation for tags & pills), the card:background contrast is 8.33:1, but the text:card contrast is only 1.45:1.

If we choose a lighter color, the text is less readable. A darker color means the current implementation's problem.

If you have an idea as to which color offers a good contrast both versus the background and the text, I'm open to suggestions. Otherwise I don't see how to get one contrast without sacrificing the other.

Examples:

color	hex	card:bg	card:text	example
Overlay 0	#6c7086	3.59:1	3.37:1
blue	#89b4fa	8.33:1	1.45:1
Overlay 1	#7f849c	4.75:1	2.55:1
Surface 0	#313244	1.39:1	8.69:1

[kommunarr]

That's unfortunately the case, and we should not sacrifice either if we can help it. One way we could do this is by having separate colors for the border around the name and the inner background text color.