Colourblind-friendly Save Button CSS

This was considered eye-catching enough without being distracted.

Probably not of universal appeal, but it is good enough for now.

Download attached and drag into TiddlyWiki.com for import.

Save Button CSS.json (504 Bytes)

2 Likes

Nice idea. I made a slight modification to make it a bit shorter :

.tc-dirty .tc-dirty-indicator path{
 animation:blink 1s infinite alternate;
}
@keyframes blink{
    0%{     opacity: 0.1;}
    100%{   opacity: 1; }
}

https://demos.tiddlyhost.com/#Blinking%20save%20button

3 Likes

That is nice code, but you left the color red.

That’s the color my colourblind friend had trouble with.

Yes but it blinks when the state is dirty, then stops when there is no change to save. This should be enough to notice the state ?

If that’s how your colour blind folk want to go, A-1.

That wasn’t what my friend was looking for. The color red is the problem.

Red blinking, red shrinking, red glowing. It is still red. The red had to go.

A reference for anybody interested: Types of Colour Blindness - Colour Blind Awareness.

2 Likes

The black and white solutions can help folks with other color related problems. I for example have chronic migraines which when I’m having one certain colors of light make many of my symptoms significantly worse.

Hey, that’s a big deal, Paul. I was unaware of that.

There are so many things that don’t get on the design radar, and they really need to be taken note of.

If you know of any related resources/info online, please please please, add some links to this discussion.

I am convinced there are all kinds of simple options/settings that could be made to address all sorts of things that I consider major barriers to usage/access, challenges for folk that are way too easily dismissed (or mention discouraged), and that sucks.

1 Like

I need to say first and foremost that the ability for a user to control colors(themes,etc.) in Tiddlywiki is vastly easier or outright superior to any other application I’ve ever used. For that I am extremely grateful.

I can only speak to the experiences of myself, friends, and family members. How color affects migraines are distinctly separate from the individual’s typical color preferences. They are NOT connected. What colors affect one person can be extremely specific. When in a migraine folks react differently to color and perception of motion. I have experienced what could be called motion sickness from what is normal mouse movement while in a migraine. Anything that could be described as frenetic exacerbates to intolerable levels.

Another distinction that is important to make is between what makes migraines worse and what triggers them. They are often for many people not the same.

The example in the article below is common. From my personal experience it is accurate but only DURING a migraine. I have green glasses that when I put them on during a migraine, I feel an immediate difference.

They found that blue and red light made the headaches worse but green light actually reduced the headaches by 20%.

Rami Burstein, PhD is a headache expert and lead author of the study. “What we hear from patients is that green light is calming,” says Burstein. “It’s comfortable. It’s relaxing. It’s happy. Whereas the other colors were making them anxious and angry and upset.”

The researchers also discovered blue and red lights generated the largest signals in the eye and brain. Green light generated the smallest.

Source Green Light Could Ease Suffering In Patients With Migraines - CBS Boston (cbsnews.com)

I’m in no way recommending anyone attempt to make a version of Tiddlywiki specifically for migraine sufferers. The same kinds of color controls that have been made and folks continue to make for other preferences and needs automatically have the potential to help someone who has migraine problems, but because of how specific things are to individuals I don’t see how a one-size-fits-all solution would be feasible. The Shiraz plugin for example has a settings tab to quickly switch between color palettes. A user could have one palette for regular use and another ready for during a migraine.

For those unaware these setting are not things that would be or are only used briefly. Migraines may only last for a few hours but can last days or longer with symptoms going as far to be debilitating even with prescription medications.

Just being mindful and considerate that the ability to make customizations for useability that for one person might be a simple preference to another might be significant to the point of being able to use or not use something is a bid deal and shouldn’t be understated.

1 Like

Hm, I might give that a try… But it also might feel really disruptive to have something constantly blinking on my screen while I’m concentrating on content. Depending on the speed of the blink, it could also exacerbate migraines or epilepsy (meanwhile, if it’s too slow, a glance would not suffice).

I’m not sure why we wouldn’t want a DIFFERENT icon for unsaved state (as we have for update timestamps, vs pause updating timestamps).

One quick option (helpful not only for colorblind, but also for mono high-contrast palettes) is to have the inverse (negative) image of the button for unsaved condition (defaulting to red or whatever palette option you like), keeping the familiar “positive” version in green (or whatever) for the happily-all-saved-now state.

-Springer

This thread inspired this Creating superpowers through interface options