search

phetsims / fourier-making-waves

"Fourier: Making Waves" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
6 stars 3 forks source link

Improve the visibility of A3 yellow #193

Closed KatieWoe closed 3 years ago

KatieWoe commented 3 years ago

Test device Dell Operating System Win 10 Browser Chrome Problem description For https://github.com/phetsims/qa/issues/711 The yellow wave for A3 is rather hard to see against a white background. Is there a more visible shade?

Visuals

morevisibleyellow

Troubleshooting information:

!!!!! DO NOT EDIT !!!!! Name: ‪Fourier: Making Waves‬ URL: https://phet-dev.colorado.edu/html/fourier-making-waves/1.0.0-rc.1/phet/fourier-making-waves_all_phet.html Version: 1.0.0-rc.1 2021-09-28 15:44:23 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36 Language: en-US Window: 1280x657 Pixel Ratio: 1.5/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 4096 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 32767x32767 OES_texture_float: true Dependencies JSON: {}
pixelzoom commented 3 years ago

I agree that this is a problem, especially for projection. On the other hand, it's the same color used in the Java version, and no one has ever complained.

If we change this color, 2 assets/screenshots show this color, and will need to be regenerated.

pixelzoom commented 3 years ago

I played around with this a little in the Color Editor.

rgb( 254, 225, 5 ) is a tad better, it's the same as PhetColorScheme.BUTTON_YELLOW.

screenshot_272

arouinfar commented 3 years ago

Thanks for the suggestion @pixelzoom.

I tinkered a bit more with the A3 color to improve the colorblind contrast, and settled on rgb(255, 210, 0) which looks like this in context: image

pixelzoom commented 3 years ago

Thanks @arouinfar, revised in the above commits for master and 1.0.

Ready for verification in next RC. To verify:

  1. Run the sim
  2. Got to the Discrete screen
  3. Verify that the color for A3 looks like what is shown in https://github.com/phetsims/fourier-making-waves/issues/193#issuecomment-932361818.