Accessibility problem with "Follows You" meessage

[mikehamca]

Steps to reproduce the problem

I looked at a user profile and saw a dark-colored rectangle at the upper left. For me (colorblind), it was totally unreadable: black letters on dark-red background. By copying the block and working on the colors, I realized it said: "Follows You."

The color scheme is new — previously the message was readable — and the selection of colors did not take accessibility into account.

I highly recommend this document: https://venngage.com/blog/accessible-colors/

Expected behaviour

The message should be present in a color combination that all can see.

Actual behaviour

Message was present in a color combination unreadable by those who are colorblind.

Detailed description

Black letters on a dark-red background (or dark-red letters on a black background) are unreadable to many who are colorblind. For accessibility, develops should choose color combinations that are legible to most users. See: https://venngage.com/blog/accessible-colors/

Mastodon instance

mstdn.ca

Mastodon version

v4.1.2

Browser name and version

Vivaldi 6.1.3035.204 (Stable channel) (arm64)

Operating system

macOS 13.4.1

Technical details

No response

[renchap]

What is your instance? This might be an already fixed issue, or the instance you are on has some local CSS changes that are causing this.

On the latest Mastodon version, the text color is white on a dark background, which provides adequate contrast.

[mikehamca]

Apologies. Meant to include that. It is mstdn.ca <http://mstdn.ca/> Michael

…

On Jul 23, 2023, at 3:08 PM, Renaud Chaput ***@***.***> wrote: What is your instance? On the latest Mastodon version, the text color is white on a dark background, which provides adequate contrast. <https://user-images.githubusercontent.com/42070/255433593-1ed46231-36db-4658-9f34-4afdbc2e4eec.png> — Reply to this email directly, view it on GitHub <#26133 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A4D2LZLA66QNSJWGGA5HDRTXRWOFDANCNFSM6AAAAAA2UXI7IU>. You are receiving this because you authored the thread.

[ChadOhman]

Hello, we do not have a custom theme or custom CSS set up on the instance.

[ClearlyClaire]

Hi! The contrast is definitely not always ideal, but I'm not able to find any occurrence of black letters on dark background here.

Do you have a screenshot? Which theme (default, high contrast, light theme) are you using?

[mikehamca]

Here is a screenshot:  I am using Vanilla Mastodon in Mastodon (Light) and the Advanced Web Interface. Here’s a larger screenshot: …. Well, this is weird. I went to take a larger screenshot, and now the “Follows You” tag does not appear at all, even on those accounts that do follow me. I don’t understand why “Follows You” is missing, but as you can see, when I had it, it had gone bad. (At one time, it was perfectly legible.) Michael

…

On Jul 24, 2023, at 7:07 AM, Claire ***@***.***> wrote: Hi! The contrast is definitely not always ideal, but I'm not able to find any occurrence of black letters on dark background here. Do you have a screenshot? Which theme are you using? — Reply to this email directly, view it on GitHub <#26133 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A4D2LZMF7AA2HVKVKYQC3VTXRZ6RPANCNFSM6AAAAAA2UXI7IU>. You are receiving this because you authored the thread.

[ClearlyClaire]

Sorry, but your message has a unicode replacement character instead of a screenshot. If you're using the vanilla Mastodon (light), then this sounds like it has been fixed in #25993

[mikehamca]

Here is a bigger screenshot. I hope this one is not replaced by a unicode:  The black rectange at the upper left is the message “Follows You." Michael

…

On Jul 24, 2023, at 8:21 AM, Claire ***@***.***> wrote: Sorry, but your message has a unicode replacement character instead of a screenshot. If you're using the vanilla Mastodon (light), then this sounds like it has been fixed in #25993 <#25993> — Reply to this email directly, view it on GitHub <#26133 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A4D2LZMNFZYE4GPX2AYBXELXR2HGNANCNFSM6AAAAAA2UXI7IU>. You are receiving this because you authored the thread.

[liza]

just wanna say, first of all, i cried after editing my first toot. yes, i shed tears because as a dyslexic writer, illegible posts were the bane of my existence. so THANK YOU for that edit function.

now on to OPs point.

am dyslexic and have "text blindness" (dysgraphia). i just found out a few days ago this is how you flag followers.

even though it may look okayish when zoomed in, in a busy page, this won't register for people with color blindness, dysgraphia, aphantasia, aka the neuroatypicals. it's why i've done my own webdev & ui modding for most of my apps i use. if i cannot change the CSS of an app, i try to find an alternative. right now i've done some cosmetic changes to the deck using Stylus for Firefox.

that flag should be right by the follow button. it's a little tweak; but it would be a huge usability improvement.

am on the docs portal and it may be my dysgraphia, but am not seeing any info on theme development. what theme engine are you using?

[mikehamca]

Here's a screenshot of how the "Follows You" message looks on my Macbook Air.

[gunchleoc]

The layout got already changed in version 4.2.0

It looks OK to me too in 4.1.6, although the colors are reversed there:

Have you tried clearing our browser's CSS cache/doing a forced refresh of the page? In Firefox, that would be the keyboard shortcut Ctrl+F5, I don't know how to do that in Safari - seems to be non-trivial https://superuser.com/questions/186594/how-can-i-force-safari-to-perform-a-full-page-reload-without-using-the-mouse