Looking for suggestions: changing the TiddlyWiki save button to accommodate colour blindness

Has anybody already modified the button for the colour blind?

The red colour is not distinguishable enough.

Perhaps the icon itself should change, rather than the colour. Unrelated, I modify the colour to yellow (my background is not white, so this works for me) when any tiddler is in edit mode. This prevents me from attempting to save the solution without closing all edit sessions beforehand.

It’s a good shout. Colour should never be the only form of coding.

1 Like

You could add a bit more of a visual change to the icon, with or without a color change:


body.tc-dirty span.tc-dirty-indicator {
 box-shadow: 0 0 3px #f00 inset;
}

I also think it is a good idea to have separate icons for saved and unsaved states.

  • Solves the problem for the colorblind.
  • Does not rely on proper palette configuration, e.g. as of now it does not turn red consistently in Solarised Light palette, I have tried it just a moment ago on an empty TW 5.2.4.

If I could suggest, I think using an asterisk * in the unsaved state icon would be a clear visual clue. Many programs use an asterisk next to a filename to indicate unsaved changes.
Maybe the unsaved icon could be an asterisk in a circle, like this unicode character ⊛ (⊛), to keep it similar to the saved state circled tick.

3 Likes

Here’s what I’m trying out with a colour-blind friend. I’ll get a colour-blind person to let me know what works best.

I’m trying out a blinking save button, black and white colours, to see if that is good at grabbing attention while not being annoying.

https://basicanywheremachine.neocities.org/BAM_IDE

Thanks all for comments.

1 Like

Color meaning for colorblind people isnt ideal. Little trick to enable attendance for sighted people and for blind too is using some emojis in button caption, this is ideal for both group of users. You may enclose button to MARK HTML tag, yes, it is not semantic ideal, but for people with screenreader and magnifier and color-palette software make it some additional attendance marker.

Thanks @Charlie_Veniot I’ve created a GitHub ticket to fix this in the core here:

4 Likes