L7R7 / gitlab-ci-build-statuses

Get the statuses of the CI pipelines in a group in Gitlab CI and display them on an HTML page
Apache License 2.0
10 stars 1 forks source link

colors #185

Open francescor opened 1 month ago

francescor commented 1 month ago

several my users have problems with colors (colorblindness) custom colors woud be appreciated (or just a different background pattern, so that even colorblind will clearly see difference... ... or maybe just make one color very dark and another very light :)

L7R7 commented 1 month ago

Hi @francescor thank you very much for reporting this! I'm interested in improving accessibility for the tool, so I appreciate your feedback. Let's discuss how we can make this work. From the top of my head, I see two main options:

  1. Make all colors configurable at application startup via environment variables. The tool uses six different colors, all of them should be configurable. The colors that are used currently could be the default.
  2. Introduction of a "colorblind mode", which swaps the color palette to something else that works for colorblind people, using different colors and/or background patterns like you suggested. The user could switch between the two modes similar to how they can switch between plain view and grouped view

The first option is definitely more flexible, but requires some effort on the user side when deploying the tool. The second would only work if we can come up with a way that works for every kind of color blindness (not sure if that's possible though).

Do you know if there is a standardized way in which a browser can tell the server that the user prefers a color blind color scheme? If so, I could use that to do serve the correct mode automatically.

Let me know what you think!

francescor commented 1 month ago

yes, 1. would solve, but asking a colorblind to choose colors is hard... maybe some 2/3 already made combinations one can just tick as you say in 2.

  1. good too, easier to implement, too

I guess that for, "retro compatibility" kind of, you cannot change colors you use now, but if you can just choosing different level of darkness would fix: light green, dark red

also repleacing the important color by adding stripes will just work

image

or even both

image

well, then repleacing full color quares with

image

would work too, but will look very bad, I know, while now it looks neat :)

uh, I see this summarize everything https://www.perplexity.ai/search/i-have-an-app-that-shows-statu-dwTDyayxSEq3PUinagTjQA but I checked the suggested "accessible colorblind color combinations" and cannot really get anything :(

L7R7 commented 1 month ago

Alright, let me try a few ideas and come back to you when I have something to show.

L7R7 commented 1 month ago

@francescor would the following work? image

This uses different background patterns for all the different colors and it includes a textual representation of the status. This should work for all kinds of color blindness I'm aware of. The idea would be that there's a way to switch to a "colorblind mode" to activate that, by default it would use the color schema like before.

francescor commented 1 month ago

oh, great! even a blind man can see it ahhaha :)

but yes, has to be an option, or else users will hate me for this request!

but, wait, there is no way to differentiate between good vs bad (apart then reading the content)

It would be better some kind of pattern that gives an idea that the failed is worst then cancelled, and successful is good

L7R7 commented 1 month ago

It would be better some kind of pattern that gives an idea that the failed is worst then cancelled, and successful is good

Agreed, I would definitely prefer a solution that does that over my idea mentioned above. I think what could work is a background that consists of a grid of "+" signs to indicate something positive, "-" for negative and "o" for something in between

oh, great! even a blind man can see it

side note: I do actually know a user of that tool who's legally blind, so improved screen reader support is on my list of improvements as well :smile:

francescor commented 1 month ago

grid of "+" signs t

yes!

improved screen reader support is on my list of improvements as well

bravo!

plus, it is like facilities for handicapped... they struggle to obtain facilities but then we all take advantage of the results they gained... so people with difficulties ends up making life easier for everybody