element-hq / element-hq/element-web

Reduce the saturation of the red

Open
#34,856 0 comments 0 reactions 0 assignees View on GitHub
A-Appearance T-Enhancement X-Needs-Design
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

### Your use case

#### What would you like to do?
Reduce the saturation of the red used for buttons, mention pills, and notification bubbles (perhaps with exception to the spaces notification as that uses white text and has a slightly darker red for better contrast).

Image

Image

#### Why would you like to do it?
Black text has relatively poor contrast against this particular shade of red, which reduces legibility and makes the content less visually accessible.

### Have you considered any alternatives?

Make text and icons on red mention pills, notification bubbles and the end-call button - white.
White provides better contrast against the current red background, making the text and icons easier to read and distinguish.

### Additional context

The foreground content should not visually compete with its background.

Contributor guide

Open the contributing guide

Research direction

The issue names buttons, mention pills, notification bubbles, and the end-call button but gives no file or test entry point. Start by locating the shared styles or color definitions for those components; done means the red is less saturated and foreground content has improved contrast, while preserving legibility for the spaces notification.

Written by the indexing model from the issue text.

Assessment

Domain
accessibility, design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.