Forum Academy Marketplace Showcase Pricing Features

Debugger for color blind bubblers

Hi guys,
One of my clients is a bubbler, and he’s color blind (just like about 7% of men and 0.5% of women).
He cannot see a difference between a green and a red text.
Therefore the debugger is almost useless for him. How might he understand this?
Capture d’écran 2022-01-27 120116

That’s why I made a trick for him.

[style]
.prop-name.condition-false:after {
content: " (FALSE)";
}
[/style]

By putting the above CSS rule (replace [] by <>) to the app (tab settings > SEO, into the header or body scripts field), you add the text " (FALSE)" after a condition, in the debugger,. if this condition evaluates as false.
Capture d’écran 2022-01-27 121625

Easy peasy to read for everyone, including color blind people !
Il hope this may help those who are concerned.

6 Likes

This should be incorporated by Bubble. Simple solution that makes Bubble more inclusive.

2 Likes

I’m also colourblind, and definitely having trouble seeing Bubble’s red indicators. I can actually see the colour difference in the debugger, but I couldn’t see the red arrow during the first 12 lessons.

Is there any way to make Bubble colourblind friendly across the whole platform? Maybe in the way that Trello does it, or just changing shades (which is pretty easy for the colourblind)?

Thanks