element-hq / element-hq/element-web

Emoji with 'BLACK' in their name are inaccessible on dark themes and could do with a border.

Open
#31,282 0 comments 0 reactions 0 assignees View on GitHub
A-Emoji O-Frequent S-Minor T-Defect
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

1. Look at some emoji with BLACK in the name on a dark theme, e.g.

Image

```
u25aa BLACK SMALL SQUARE
u25fc BLACK MEDIUM SQUARE
u25fe BLACK MEDIUM SMALL SQUARE
u2660 BLACK SPADE SUIT
u2663 BLACK CLUB SUIT
u2734 EIGHT POINTED BLACK STAR
u2b1b BLACK LARGE SQUARE
```

aka . ▪◼◾♠♣⚫🖤 etc.

2. Observe that black-on-dark is hard to read.

### Outcome

#### What did you expect?

Better accessibility. Best bet is probably to modify the colr glyphs to have a white border around them, manually or automatically.

Another could be to monochromise them as per https://github.com/element-hq/element-web/issues/14695 - which I tried and then reverted in https://github.com/matrix-org/twemoji-colr/commit/bbe76d8377faa70ef8ed3dd6fcdffd27f83ca465 and https://github.com/element-hq/element-web/pull/31281 given they made 'black' emoji come out 'white', which is semantically wrong. (Worth noting that on a typical browser/OS like Chrome on macOS, github also gets thies wrong), e.g:

Image

#### What happened instead?

Dark on dark isn't accessible.

### Operating system

_No response_

### Browser information

_No response_

### URL for webapp

_No response_

### Application version

nightly

### Homeserver

_No response_

### Will you send logs?

Yes

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.