phetsims / fractions-common

Common code for Fractions simulations
MIT License
0 stars 1 forks source link

change color of partition lines #24

Closed amanda-phet closed 5 years ago

amanda-phet commented 5 years ago

The partition lines in the HTML5 sim seem very difficult to see. When comparing the two sims, it seems like maybe we are using a darker shade of gray. And the java sim might be using a thicker stroke?

Let's try changing the color of the partition lines, and if that doesn't solve the problem then we can try something else (like a black stroke or another color).

image

image

Jonathon please try making the dashed line color #C0C0C0 and see if that helps.

jonathanolson commented 5 years ago

Done. Can you try off phettest to see if this is better? I can also increase the line width, or stroke the dashes.

amanda-phet commented 5 years ago

It seems a lot better to me now! But the green on level 3 is pretty bad now. Comparing with the java version, the thicker stroke seems to make a difference, but I am concerned that across the board the contrast won't be great for any color (especially for a low-vision user) unless we change all colors, and the variety we currently have is really nice.

So, I'd like to try your idea to stroke the dashes. If it doesn't work for all colors, I will make a new color palette.

jonathanolson commented 5 years ago

My best idea for the dashes is to actually alternate between semi-transparent-black and semi-transparent-white:

fraction-dashes-1

It basically seems to have the same appearance on a white background, but (to me) looks better on a variety of colors.

Thoughts? (committed to master, feel free to test on phettest)

amanda-phet commented 5 years ago

This is great! The semi-transparent stroke is nice because it looks nice on the white area, the black strokes, and the colored areas. I checked on all game levels and I think this is the best option! Thanks for coming up with this.