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 @anon57234190,
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.
I also struggle with the Buildkite colour scheme, having a red/green colour deficiency. I can see the difference between very saturated reds and greens when next to each other, but cannot tell the difference between, say, thin borders that are light red or light green.
BuildKite has become quite good over the years at improving their UI to incorporate ✓ and 𐄂 marks, and I thank you for that. It’s definitely the best approach, rather than swapping colours or increasing saturation.
For the little bar graph indicating test success/failures over time – perhaps consider adding a cross-hatched background to the red bars? I note that the “in progress” bars already have a diagonal background, which solves the issue first raised here. So potentially it wouldn’t be too hard to add something to the red bars too.
That said – with the bars close together and highly saturated colours, I personally can distinguish the red and green OK, but I know some people have even stronger deficiencies than I.
I have a suspicion that there’s a place using red/green borders without icons that I can’t tell apart.
When looking at a build pipeline in progress, I think the system knows if an in progress build step is going to fail, but hasn’t completed yet, and highlights that with a different border colour. It doesn’t use the “x” icon, however, as it is still the “rotating arrows” icon.
I’ll try and get this state to occur so I can inspect the CSS to be sure. Or borrow a colleague with better vision.
Thanks for this feedback. The icons should help with the differentiating jobs that have passed or failed. I understand there is no indicator for a failing build as it just transitions the orange running icon to a red running icon. I’ll raise to our product team regarding a cross-hatched background to failing builds as it transitions to failed.
Hi @Wintermute ,
I’m from the product team at Buildkite. Thanks for sharing your experience here! We have made improvements to the way we’re presenting state and progress in our charts, but definitely appreciate that we can do more. We are adding some new charts at the moment, and as part of that, we are trying to bring up to scratch some other parts of the platform, so this feedback is timely and very useful.
