element-hq / element-hq/element-web
Emoji with 'BLACK' in their name are inaccessible on dark themes and could do with a border.
- 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.
```
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:
#### 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
Assessment
This issue has not been assessed yet.