Help color blind people by changing dots to icons

[gapodo]

Clear and concise description of the problem

As a colorblind user, it is difficult for me to see the status of steps in pipelines.

Suggested solution

Change the colored dot in the web-ui over to an icon. We could possibly reuse the icons used to display the status in the workflow view.

The colored dot in question:

This is the icon I think we could use (of course "all of them" depending on status).

Alternative

Other icons or leave it be? It's not a huge inconvenience (though I'm not fully colorblind)

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[gapodo]

also tagging #1314 as this would be a UI improvement / feedback

[altdsoy]

Couldn't agree more with a16y improvements!

[anbraten]

Thanks for this helpful feedback.

Linking #959

[gapodo]

@anbraten Just as a follow-up since I am unsure if / where we should document it, a very good simulation is available at https://www.color-blindness.com/coblis-color-blindness-simulator/ (it requires uploading as an image, but unlike others has very solid results). We tested 2 of the 3 (main) simulations, with me, Protanopia and a friend Tritanopia, and a "full color capable" 3rd party (on a multitude of images), and the results produced are fairly close to what we see (i.e. we thought our respective simulation is identical or just a bit brighter / darker than the original) and the "normal vision" person was shocked.

If there is a need for a tested (chrome / firefox) add-on I could see about getting together and testing one, so we would have a reference for people that don't know how colors can impact the UX of a UI, that works on the fly

Edit: just found the second page we were using (and verifies) which was https://www.toptal.com/designers/colorfilter which takes an URL

[anbraten]

I guess best option longterm would be to have a check as part of the CI 🤩. Testing it manually requires some time and therefore would be to much to ask every UI developer to do. We could create a section in the docs in the development section noting some useful tools like the ones you suggested, so someone could check from time to time.