FreeTubeApp / FreeTubeApp/FreeTube
[Bug]: catppuccinMocha: Color contrast for owner comments is too low
- 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:

Dark theme:

### Nightly Build
- [ ] I have encountered this bug in the latest [nightly build](https://docs.freetubeapp.io/development/nightly-builds).
Contributor guide
Assessment
This issue has not been assessed yet.