search

phetsims / number-line-integers

"Number Line: Integers" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
0 stars 4 forks source link

Improve readability of "green" font on the bank scene by using darker shade in piggy bank #44

Closed kathy-phet closed 4 years ago

kathy-phet commented 4 years ago

On the phone, the contrast of the green font on white is hard to read. Can we use the darker shade of green in the piggy bank? (the upper text box, versus the current shade which is in the lower text box). The red font has really good contrast and is easy to read. image

jbphet commented 4 years ago

This doesn't seem too contraversial, so I'm going to implement it on my next NLI development day (though @amanda-phet is of course free to chime in if there are objections).

amanda-phet commented 4 years ago

That works for me.

@jbphet you have the hex code, right? I think I gave it to you as part of the color scaling from lightest to darkest. But let me know if you need it.

jbphet commented 4 years ago

@jbphet you have the hex code, right?

Not that I know of. The darker color is actually generated as a combination of the nominal fill and the overlayed image that contains the flowers or lightning bolt, so it's not actually used in the code anywhere. To get the value, I just extracted it from a screenshot of the piggy bank and used the coler from the dark patch just below the eye. The value is #0e977b, and that matches the text in @kathy-phet's example, so I went with that number. It looks good to me, and I don't think anyone is likely to object, so I'm going to close.