Green background and white text on pointer tool kinda hard to read in iFrame

[maggiewiseman]

Test device: Mac Airbook

Operating System: OSx 10.11.5

Browser: Chrome

Problem description:
This is primarily an issue of accessibility. Using the sim in the iFrame results in the text of the pointer tool be much smaller than when not in an iFrame. It is more difficult to read the (x,y) coordinates for the white text on the green background compared to the black and white text. Is there any change that could be made to make it easier to distinguish the numbers when the font is so small?

Steps to reproduce:

1. Open the sim in an iFrame
2. Click on y=x
3. Move pointer tool until the coordinates color changes to green background with white text

Screenshots:

Related to: phetsims/tasks/issues/815

Troubleshooting information (do not edit):
Name: ‪Graphing Slope-Intercept‬
URL: http://www.colorado.edu/physics/phet/dev/html/graphing-slope-intercept/1.0.0-rc.1/graphing-slope-intercept_en.html
Version: 1.0.0-rc.1 2017-04-12 19:48:25 UTC
Features missing: touch
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Language: en-US
Window: 1920x1126
Pixel Ratio: 1/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: 15 uniform: 1024
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 80)
Max viewport: 16384x16384
OES_texture_float: true
Dependencies JSON: {"assert":{"sha":"a707328c","branch":"HEAD"},"axon":{"sha":"81919d26","branch":"HEAD"},"babel":{"sha":"fdde4356","branch":"master"},"brand":{"sha":"054ca5c3","branch":"HEAD"},"chipper":{"sha":"36dc0e55","branch":"HEAD"},"dot":{"sha":"a0c5770e","branch":"HEAD"},"graphing-lines":{"sha":"032bc04e","branch":"HEAD"},"graphing-slope-intercept":{"sha":"a851237a","branch":"HEAD"},"joist":{"sha":"91516011","branch":"HEAD"},"kite":{"sha":"81166ce9","branch":"HEAD"},"phet-core":{"sha":"c5c6c2a8","branch":"HEAD"},"phetcommon":{"sha":"68053a7d","branch":"HEAD"},"query-string-machine":{"sha":"d8a4ff18","branch":"HEAD"},"scenery":{"sha":"17b5a7e4","branch":"HEAD"},"scenery-phet":{"sha":"8ea5852c","branch":"HEAD"},"sherpa":{"sha":"0e326d54","branch":"HEAD"},"sun":{"sha":"50c6a1d0","branch":"HEAD"},"tandem":{"sha":"18703f2f","branch":"HEAD"},"vegas":{"sha":"3c3561d2","branch":"HEAD"},"vibe":{"sha":"49fdbe7d","branch":"HEAD"}}

[pixelzoom]

This is similar to trying to make sims usable on phones. That is, sims (in general) are not designed to be usable on small screens. In this specific case, the iFrame is small because this is just a test to verify that the sim works in an iframe, not a test of its usability in an iFrame. If/when this sim is actually embedded in an iframe, then the iframe would be made larger. So I'm inclined to close this as "won't fix".

@amanda-phet @ariel-phet do you agree?

[ariel-phet]

@maggiewiseman a good observation, but for the moment @pixelzoom is correct. The iFrame test is for functionality, to make sure that everything is actually working and no bugs have been introduced when opening the sim in an iFrame.

We have a number of design questions we will need to address when considering how to optimize the use of sims on small screens that we are not yet able to tackle.

Regardless @maggiewiseman - clear issue report, and we always appreciate discussion around such issues (as it also put everyone on the team on the same page as to what sorts of issues we can address currently).

Closing.