Appearance of bubbles and mentions became very hard up to totally perceptually unreadable on develop

[MTRNord]

Steps to reproduce

1. get notifications or a mention or make a pill

Outcome

What did you expect?

Readable Text and a good contrast

What happened instead?

Especially the black on red is very hard to read but the black on lightgray in notification counters also has not nearly sufficient contrast to be easy to read. The zoomed screenshots make it easier since there is less "noise" in terms of other items around but in context (which I cant screenshot for various reasons...) it feels like these are currently by far the hardest to read items across the whole app.

Operating system

Fedora Silverblue 39

Browser information

Firefox 123.0.1 (64-Bit)

URL for webapp

develop.element.io

Application version

Version von Element: 38dbedc-react-26b4d47af18c-js-92342c07edb6 Krypto-Version: Rust SDK 0.7.0 (b1918e9), Vodozemac 0.5.1

Homeserver

matrix.midnightthoughts.space

Will you send logs?

No

[robintown]

In theory all of these elements (even the notification badges in dark mode) are passing our contrast requirements, however this is still valuable feedback.

[t3chguy]

@robintown not on everything

[FSG-Cat]

I will personally add that this issue is amplified when your in a dark environment and at an off angle.

Benchmarks are good for one thing in this case i would say. Sanity Checks. Try to sit an arms lengh away in a dark except monitors light room and try to look at it from the side. Its not that readable.

Especially at 1920x1200. The numbers are a few pixels in size. And thats measured by looking at the screen close enough where the Retina effect breaks and individual pixels are visible.

At a window size of 1920x1096 for the size of the box that isnt the top bar that Windows Controls and then extending all the way down to the task bar that is at like Size 3 in Win 10 (Shows Clock, Day of week, YYYY-MM-DD)

Like yes my monitors arent the best but they are decent if not Good IPS 1920x1200 23 inch monitors.

We are talking about contrast for a 16px size circle and trying to diffirentiate a few pixels. And this is supposed to actually be easy. Back when it was White and Black it was about as much contrast as you can squeese out and the design was easy to read. And White on Red also easy to read. Darker colour background and white text. Very high contrast and very easy to read. Atleast for me and i have after correction normal sight.

So if i find this new design hard to use and i am someone who has normal sight in this context i wouldnt want to imagine the accesibility failure this is.

[robintown]

@t3chguy That contrast failure has been with us for some time, it's not a regression

[MTRNord]

I will personally add that this issue is amplified when your in a dark environment and at an off angle.

Benchmarks are good for one thing in this case i would say. Sanity Checks. Try to sit an arms lengh away in a dark except monitors light room and try to look at it from the side. Its not that readable.

Especially at 1920x1200. The numbers are a few pixels in size. And thats measured by looking at the screen close enough where the Retina effect breaks and individual pixels are visible.

At a window size of 1920x1096 for the size of the box that isnt the top bar that Windows Controls and then extending all the way down to the task bar that is at like Size 3 in Win 10 (Shows Clock, Day of week, YYYY-MM-DD)

Like yes my monitors arent the best but they are decent if not Good IPS 1920x1200 23 inch monitors.

We are talking about contrast for a 16px size circle and trying to diffirentiate a few pixels. And this is supposed to actually be easy. Back when it was White and Black it was about as much contrast as you can squeese out and the design was easy to read. And White on Red also easy to read. Darker colour background and white text. Very high contrast and very easy to read. Atleast for me and i have after correction normal sight.

So if i find this new design hard to use and i am someone who has normal sight in this context i wouldnt want to imagine the accesibility failure this is.

Thats also my feeling here. Its nice that the calculation technically says its fine but in the greater context it feels like it has a lot less contrast than anything else on the app. It stands out a lot.

In context it really stands out but tbh not positively. it just doesnt seem right for the rest of the theme

[MTRNord]

By the way I am not sure if the labels are correct. These are neither occasional or minor things imho. No workaround exists either. Its a thing you see all the time. Notification numbers are pretty default and mentions are very common even in replies they are visible by design as pills.