High contrast mode

[brawaru]

Clear and concise description of the problem

Partially copied from Discord

Back in the days Twitter has removed most of the borders or made them really faded, and it became really hard for neurodivergent folks like me, because it essentially made the app a mishmash of incoherent elements, creating a condition where my eyes are all over the place and I can't just comprehend any information on the page. Gladly they have a high contrast mode that introduced most of the borders back or made them more prominent, it also made all primary colours darker.

Unfortunately, Elk suffers from the same issue, perhaps to a worse degree, even. For folks like me Elk is simply unusable: it's hard to keep my attention at any particular part of the site — I cannot focus on anything and constantly feeling lost. This is not my experience on Mastodon — with or without a custom theme.

Regular Mastodon	Mastodon with Modern theme by Freeplay

The reason is simple: lack of contrast and visual boundaries (via borders or backgrounds) to clearly separate the elements into their own ‘baskets’.

Suggested solution

I think one of the solutions will be having a high contrast preference, which would to add borders or make them more prominent, as well as make the colours more contrast-y (darker in light mode, brighter in dark mode).

Here's what Elk looks like for me after playing with CSS in DevTools for a bit (hover state locked for buttons for demonstration reasons):

Here's what I did:

• Changed font to Inter (Roboto also works). It already made a huge difference making text ever so slightly bolder.
• The primary colours are now much darker (or lighter, where needed, like search) and prominent on slightly grey background that Elk uses.
• Borders introduced to a main (feed) column. Unfortunately I wasn't able to figure out why there's a border at the top.
• Borders themselves now use much darker colours.
• Added on-hover backgrounds to posts and embed cards.
• Added borders to embed cards and removed their default grey background.

And here's video of me doing various stuff on the page:

https://user-images.githubusercontent.com/10401817/213188712-949e4a50-8526-48d1-b393-671902534b71.mp4

Alternative

• Total change of design? Seems too radical.
• Manually fixing styles with UserStyles? This would only work for me then, while others like me have to face the same issues.
• Not using Elk. This what I kinda do already... Sadly. I want to test it like all other cool kids do.

Additional context

Important note must be made that high contrast mode would not be aimed strictly at the neurodivergent folks like me, but primarily at the people with vision issues. Twitter does more stuff for high contrast mode, like adding underlines to every link on the site, but this would not be useful for me (maybe it can be its own toggle like in Discord).

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.