Talking to one of my colleagues recently, he told me the he finds it difficult to scan over builds and see what has failed as he is red green colorblind, so there is very little difference to him. I know of some other devs in our org who have this problem but it is just something they have dealt with silently, and I think there are probably a lot more that I haven’t discussed this with. Is it possible to have an account setting to activate an alternate color scheme for the main status colors (i.e. green yellow red) so that our colorblind devs can use buildkite as easily as the rest of us? Not a critical request, but a nice to have.
Thanks so much for reaching out. This is something that we would really love to improve. Could you perhaps ask your colleague to send through some screenshots of particularly problematic bits of the UI so we can investigate them as a priority?
Said that, I think there is no UI change that can fix this problem for all colour blind families that exist. So far, the most successful experience that I’ve had regarding this topic was in Android. Google created a UI theme optimised for every family type and it is up to the person to set it up accordingly.
Feedback
Pipeline Status Graph
Problem
It is impossible for me to distinguish between the orange (on-going) builds and the green (finished succesfully builds). However, the red (failed) builds are extremely easy to identify.
Suggestion
I think using a darker green and a darker orange will help me differentiate them.
It is impossible for me to distinguish between the red and green colours used to represent succeeded and failed steps. I am currently using the small ⨯ and the thicker red pill border to distinguish between a succeeded and a failed step.
The same applies to the whole build card. If someone asked me about what colour it is without me knowing it corresponds to a representation of a failed build, I would probably say brown or similar. However, the cross icon on the right top corner uses a red colour that I can easily distinguish.
Thank you for taking this issue into consideration and feel free to ask for more feedback / information. I’d bee very keen to participate testing or similar if required for any related changes you are planning to do!
Thank you so much for this @albert.l! This is something that we’ve wanted to improve for a long time. Can you send me an email to support@buildkite.com so I can give you a code for our shop to say thank you?
I really appreciate the time you’ve put into this!
Hello @eleanor,
no worries at all! I am really glad that you guys found my feedback useful and, as I already said, feel free to ask for more if needed!
Note for those not aware: all forms of hereditary color blindness, no exceptions, are red/green. Blue/yellow are generally considered “safe” colors. One technique to see if a color is hard to tell apart from another is to simply open it up in GIMP, go to Color --> Hue/Saturation, then drag the “Saturation” color all the way to the left. Now, that’s what a color-blind person, absolutely worst-case, sees.
In reality, though, almost all “color blind” people simply have reduced color saturation detection, focused on either red or green, meaning that simply increasing color saturation helps a lot.
I’ll point out too that most “color blind” people can see red and green, just not as well, but since red means bad and green means good, increasing saturation is more desirable than relearning colors such as “blue means bad” and “light blue means good”, or something, so sometimes “color blind” modes are not super helpful either because they require re-learning meanings behind colors.
In other words, the low-hanging fruit it to simply 1) increase color saturation for all colors used. Ex: rgb(255, 0, 0) (fully-saturated red) is much better than rgb(255, 200 , 200) (washed-out red). Additionally, sometimes color darkness differences can help–in other words, choose colors such that if you removed all color and made it grayscale you’d still be able to see a darkness difference between the colors.
