FreeTubeApp/FreeTube

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

Open

#6597 opened on Jan 16, 2025

View on GitHub
 (8 comments) (0 reactions) (0 assignees)JavaScript (9,938 stars) (600 forks)batch import
B: accessibilityU: reproducedbuggood first issue

Description

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

Dark theme: Image

Nightly Build

Contributor guide

Tech stack
javascriptcssvue
Domain
frontendaccessibility
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSScolor contrastaccessibility
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
The issue is a CSS color contrast bug in the Catppuccin Mocha theme. The relevant CSS properties are `card bg color` and `secondary card bg color` under `.catppuccinMocha`. To fix, adjust these variables to achieve a contrast ratio of at least 4.5:1 against the background. The theme files are likely in `src/renderer/themes/` or similar. No pull request is linked; the issue is unassigned and open, so a contributor can work on it independently.