Highlight on alert word isn't colorblind-friendly (in night mode)

[jmandel]

Similar to #3524 I can't read the highlighted text in:

Incidentally, I'm not sure why this particular word is highlighted or what the highlighting indicates.

[ishammahajan]

@jmandel thanks for reporting this! Is it perhaps that you're using the 'Alert Words' feature? For reference for the other devs, here's what it looks like in the WebApp.

As it goes, I think the highlight on the mobile app is very harsh, and should be toned down.

[jmandel]

Yes, good call. It's an alert word - and indeed, I couldn't read it :)

[gnprice]

Thanks @jmandel for the report!

@ishammahajan , if you'd like to claim this and take it the rest of the way, I think it's another one you're well equipped to take care of 🙂

The highlighting in the webapp (in Isham's screenshot above, in night mode) doesn't look great to me either. @jmandel in the same message you have above, can you read the word well in the webapp? If so then we should certainly copy the webapp here as an immediate accessibility fix, but either way it's possible it'd be good to then adjust the design on both platforms, at least in night mode.

[gnprice]

I just edited the title to reflect what we figured out above about what this feature is 🙂

@jmandel , if you'd be up for checking how this works for you in day/light mode, that'd be helpful too.

[jmandel]

Thanks! In light mode, it looks fine for me.

[jmandel]

Also, to be complete: In dark mode the mobile app and the web app are both unreadable for me.

[gnprice]

Also, to be complete: In dark mode the mobile app and the web app are both unreadable for me.

Ah, OK! I'll go turn this into an issue on zulip/zulip, then, for a bit of a wider audience -- and whatever we end up with, we can implement on both web and mobile.

[ishammahajan]

@ishammahajan , if you'd like to claim this and take it the rest of the way, I think it's another one you're well equipped to take care of 🙂

Sure!

Ah, OK! I'll go turn this into an issue on zulip/zulip, then, for a bit of a wider audience -- and whatever we end up with, we can implement on both web and mobile.

Once a consensus is reached there, I think I'll pick this up 😄 .

[ishammahajan]

So I checked the color used in the webapp to highlight an alert-word, and found that it is hsla(102, 85%, 57%, 0.5), which is exactly the color used in our mobile app.

Looks like we're using this already (looks exactly like the webapp).

[ishammahajan]

So the above commit doesn't fix the issue completely, it just applies sort of a temporary patch to make things more readable than before.

Also, to be complete: In dark mode the mobile app and the web app are both unreadable for me.

@jmandel, would you please read the following and confirm if reducing the alpha (increasing the transparency) helped at all?