Font size and low contrast limit usability

[jeffsf]

For those with even moderately reduced visual acuity, the small fonts and low contrast makes the site challenging to use. The keycode names in the upper left and labels like PSCRN are examples.

[nickcoutsos]

Hey, sorry about this, I know accessibility is an area where the app (and my own ability, honestly) is lacking. I did have a look at contrast before and have some partial theming changes on the backburner that I can try to get deployed in the next few days, hopefully that's some improvement.

I know that's not going to take care of everything... the text size is a real challenge due to the fact that some of the ZMK keycodes have very excessively long names and don't necessarily have shorthands or symbols. My compromise is to have a few text sizes to choose from based on name length but of course that can cause problems of its own. The other part of this is that it attempts to scale the entire layout down to fit the screen width but I'm lacking an option to disable that and/or increase the default size.

Beyond that I think the fallback of tooltip showing key's binds on hover could be made more descriptive.

[jeffsf]

It's a hard problem, I agree. Thanks for the consideration.

When it cools down a bit here I may poke at CSS a bit.

[dasch00]

Keymap is very hard to read with my visual acuity.
My suggestions:

1. use 🡅 (Upwards Heavy Arrow) for Shift
2. use ! (Exclamation Mark) for Alt on windows (or at least 'LA')
3. use
   [data-long="true"] { font-size: 115%; }

and remove
/* .modifier, */
.keycodeWithModifiers {
background-color: rgba(30, 30, 30, 0.1);

add on div (which represents key);
/* overflow-wrap: anywhere; */
text-align: center;