Block border is hard to see and can cause confusion interpreting the code

[microbit-carlos]

This code snippet was posted on Reddit a few days ago and it illustrates how hard it is to spot a code bug of this type in the blocks view. This is less of a problem when the input blocks are a different colour, but when the colour is the same it's really hard to see the block border and tell them apart.

https://www.reddit.com/r/ProgrammerHumor/comments/118xona/i_dont_know_how_to_use_python_or_javascript_at/

I would argue that in that picture of a laptop monitor the block border is more noticeable than it is in my own laptop screen. Without knowing what to look for these two blocks look almost indistinguishable to me: https://makecode.microbit.org/_0cF9euXoRF8R

Can we do something to increase the contrast between blocks of the same colour?

[abchatra]

No plans to address.

[microbit-carlos]

We'd like this to be reconsidered for the next release if possible.

[abchatra]

@riknoll anything could be done here cheaply?

[riknoll]

I've been trying a few experiments this morning

For reference, this is the current way this is rendered:

Here is the same rendering but with all of the block borders slightly darker:

Here is the default border color but with slightly more padding added to each block:

...and here is the increased padding with the darker border:

Would love to hear thoughts @abchatra @Jaqster @microbit-carlos

[Jaqster]

I like the darker border option. I worry about increased padding that makes the blocks fatter and will take up more screen real estate.

[riknoll]

my personal favorite is same border, increased padding. i think the darker border with no increased padding is very hard to read

[Jaqster]

instead of a dark border, what if we did a lighter border?

[srietkerk]

My vote is for the darker border and added padding!

[thsparks]

Padding seems very subtle to me, not sure I'd have even noticed it without the label. Could you show the side-by-side comparison from the original bug with the extra padding (the two expressions that are similar)? I'd be curious to see how they look visually next to each other.

I think the darker border looks nice though.

[martinwork]

In live, hovering highlights the parts,

but in beta, only the dropdowns are highlighted.

[Jaqster]

instead of a dark border, what if we did a lighter border?

In Martin's screenshot, I do like the light border - makes it very clear. What if we did this only for same color nested blocks? Would it look too busy if we had multiple nests?

[jaustin]

In Martin's screenshot, I do like the light border - makes it very clear. What if we did this only for same color nested blocks? Would it look too busy if we had multiple nests?

We discussed this internally and @microbit-carlos may have a lingering screenshot from playing with the Inspector to test it. We Iiked the lighter colour

I think it would be great if "light border for same colour nested blocks" was do-able. It feels like a far clearer way to do it.

If we didn't have the ability to only turn lighter borders on for same-coloured-blocks, I think lighter, not darker, might be a good tweak to apply to the borders on the purple blocks?

[riknoll]

i don't think that a lighter border will work for every color of block, but i agree it looks better for the relatively-dark math category.

we already do some color altering based on relative luminance for shadow blocks, i'll see if there is some way for me to apply that to all nested blocks. will probably have to modify the renderer a bit

[riknoll]

here are some options for lightness of the borders

option 1 (darkest):

option 2:

option 3 (lightest):

[riknoll]

Same options, but with 1 extra pixel of padding:

option 1 (darkest):

option 2:

option 3 (lightest):

[riknoll]

same options, but with the extra padding and very slightly thicker borders on all blocks

option 1 (darkest):

option 2:

option 3 (lightest):

[Jaqster]

My personal preference would be Option 1 or 2 for the color (I think even option 1, the darkest shows up well). I don't think we need extra padding or to change the line thickness.

[thsparks]

My vote would be for 2, runner-up choice would be number 3

[microbit-carlos]

Option 2 or 3 would be my vote. With the lighter border I don't think we need the extra padding either. The padding was useful when there was less contrast between the border and the block colours.

we already do some color altering based on relative luminance for shadow blocks, i'll see if there is some way for me to apply that to all nested blocks. will probably have to modify the renderer a bit

If this was possible and it could automatically render the border colour (light or dark) with the best contrast based on the block colour, that would be fantastic!

[jaustin]

We've discussed here and would be pleased to see this merged. If we have to come down on a preference, ours is 2, too!

[riknoll]

I did indeed go with option 2 in the pr!