FreeTubeApp / FreeTubeApp/FreeTube

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

Open
#6,597 8 comments 0 reactions 0 assignees View on GitHub
B: accessibility good first issue U: reproduced
Dominant language
Vue
Stars
21.9k
Forks
1.5k
Avg merge
1d 14h
Merged PRs (30d)
62

Description

### Guidelines

- [x] I have encountered this bug in the [latest release of FreeTube](https://github.com/FreeTubeApp/FreeTube/releases).
- [x] I have encountered this bug in the [official downloads of FreeTube](https://github.com/FreeTubeApp/FreeTube#official-downloads).
- [x] I have searched the issue tracker for [open](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aopen+is%3Aissue) and [closed](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aissue+is%3Aclosed) issues that are similar to the bug report I want to file, without success.
- [x] I have searched the [documentation](https://docs.freetubeapp.io/) 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

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 https://github.com/FreeTubeApp/FreeTube/pull/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:
![Image](https://github.com/user-attachments/assets/20557d88-1176-4007-b601-732846d1dd23)

Dark theme:
![Image](https://github.com/user-attachments/assets/bc7725cc-de1a-45de-8d83-2d69f3ea15eb)

### Nightly Build

- [ ] I have encountered this bug in the latest [nightly build](https://docs.freetubeapp.io/development/nightly-builds).

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.