User suggestion: increase contrast of particles

[oliver-phet]

I am a teacher of the visually impaired at Kentucky School for the Blind, and I have used your simulations to teach a number of topics to students over the past 9 years. I am currently teaching atomic structure to students with low vision and difficulty with color differentiation. The "Build an Atom" simulation has a number of very useful tools in it for learning about atomic structure, but it is difficult to tell the protons and neutrons apart from each other and the background for several of my students (I confess that it is also difficult for me to see the neutrons on the off-white background at times as well).

Is it possible to have the colors of each circle set to higher contrast, and instead of having the gradient of color from white to whichever color is being used to represent the particles, just use solid circles? This would greatly enhance the visual accessibility for my students. Obviously this isn't a solution for students who are completely blind or are unable to effectively use their vision for learning media, but the change could still benefit other students.

[jbphet]

@emily-phet - This is a great example of a specific request to improve a sim for visually impaired students, and I'd be happy to work on it. I feel like we discussed having some sort of a "high contrast" setting in the past for sims. Is this something that could be done as part of one or more of the current grants?

[emily-phet]

@jbphet - if you can do a quick solution and send them a dev link to that, please do so. If there's not a quick solution, it's more middle of the road, let me know and we'll see if we can figure something out.

Color contrast in general is something we can consider tackling for 2021, but that would be research on a generalizable solution. Color contrast challenges run deep, we'll ultimately need to offer multiple options, etc., add options to the new Global Control options menu, interview with folks, etc., which is too much for you to take on right now, and certainly so with your development.

For the a11y team, we need Faraday's Law published this quarter, sound design complete for RaP, and if you have any leftover a11y time this quarter, let me and @kathy-phet know, we'll probably want you to put that time into building out Greenhouse (on @kathy-phet's budget).

[jbphet]

I met with the teacher who made with the suggestion today (via Zoom) and we tried a couple of things in real time. There were two options that seemed good time him, so I'll create dev versions and send them to him.

[jbphet]

I've created two dev versions that I'll share with the teacher who made the suggestion. There is a link to each below followed by a screenshot of what the particles look like.

https://phet-dev.colorado.edu/html/build-an-atom/1.7.0-dev.1/phet/build-an-atom_en_phet.html

https://phet-dev.colorado.edu/html/build-an-atom/1.7.0-dev.2/phet/build-an-atom_en_phet.html

[jbphet]

I quite like the look of the 2nd one, and if that one is preferred, I think we may just change the particles permanently to look like this. For now, I think I'll leave them like this on master and will update based on the feedback.

[jbphet]

The teacher tested out these versions with two students, here is the feedback:

Hey @jbphet ,

I worked with two of my students who have color deficiencies and decreased visual acuity and got their feedback regarding the three versions of the simulation (the original and the two dev versions). I presented the simulations to them through Microsoft Teams in full screen mode without zooming in on my end. The students were able to zoom in using their normal assistive technology with no screen color modification.

Both students had similar comments regarding the simulations. I've recorded their comments separately.

Student 1:

• Original Simulation - Can see the protons and neutrons in the middle, but has difficulty identifying which is which, and the neutron tends to blend into the background especially on the white part of the gradient. When stacking up a larger number of the protons and neutrons, she could still sort of see the different particles next to each other, but the lack of outline or detail made it more difficult with larger numbers. The electrons are fairly easy to identify separately because of their position more than their color.
• Single-color circle version - Much easier to identify the protons and neutrons in the middle. She can tell them apart much more easily with the exception of Helium-4 (2 protons and 2 neutrons, for some reason this seemed to make the colors blend together for her). She was still able to identify protons and neutrons separately for larger nuclei with less trouble than in the original simulation.
• Darker, burnt out version - The colors for the protons and neutrons were not distinct to her, and she couldn't really tell them apart.
• Overall, the preferred version was the single-color circle version. She could much more readily see each individual object. Student 2:
• Original Simulation - Student could see protons and neutrons and could tell them apart in the original simulation, but when asked about after showing the other versions, he confessed that the only way he could tell them apart and see them distinctly from the background was when he zoomed in on them. He said that the white spot on the gradient made it difficult to identify them as distinct from the background.
• Single-color circle version - Immediately said he was more easily able to see the protons and neutrons without having to zoom in on his device. Was able to tell the protons and neutrons apart, and pointedly said that he liked this version better for seeing what was in the atom. After seeing this version and switching back to the original, he said that the original version was much more difficult to see the parts on.
• Darker, burnt out version - The student could identify the difference between the protons and neutrons, but had more difficulty without zooming in. He said that they seemed grayer to him and harder to tell apart.
• Overall, again, the preferred version was the single-color circle version. I'm not sure if there's a way to embed a low-vision version into the options menu for the original version, but I do think that it would be helpful to have the single-color circle version available for students with low vision. If you think it would be beneficial to have more commentary from additional students, I would be glad to continue testing the simulations with my students.

Thank you for working on these! I really appreciate the time you took on this project.

Based on this feedback, I'm going to focus on adding some means to set a "high-contrast mode", since the particles with the gradients don't seem to be working very well, and I don't think the flat particles would be a good way to go in the current sim.

[jbphet]

@emily-phet and I discussed this, and we decided for now to add an option to the "Options..." portion of the PhET menu for now so that the solid particles can be selected. Once the Preferences Menu is in place, this option will migrate to that menu. We will call it "High Contrast Particles", and the string should go in build-an-atom as opposed to joist.

[jbphet]

@ariel-phet - I've implemented the option for high contrast particles, and along the way I ended up making some changes to the default particles that I personally prefer over what is currently live. Would you have any objection to publishing with the updated default particles as well as with the support for higher contrast? I've captured screenshots below, you can check it out on master if you want to interact with the particles and/or try out the High Contrast Particles option.

Old:

New:

[ariel-phet]

@jbphet, no objection at all, I think that is a nice change!

[kathy-phet]

Personally, I would prefer something in between. It's feeling too dark for me now - less cheery. At any rate, I'm tagging @arouinfar who should also weigh into the conversation, and we also need to check for color blindness if we are making modifications to the main sim. I think there would be something in between that I would like - as I do agree that the current particles are a bit challenging because they go so close to white on the one edge. Starting at a brighter blue or going to a light blue that has white instead of pure white might keep the cheery feel, but provide better contrast with the white background.

[arouinfar]

I don't love the standard particle colors currently in master, but the stroke is a really nice touch. While there aren't any color blind contrast issues with the new colors, they look a lot darker/muddier.

Version	Screenshot
Latest
Master
High Contrast

@jbphet could we use the same base color for both the standard and high contrast modes? I think that would brighten things up a bit.

[jbphet]

@jbphet could we use the same base color for both the standard and high contrast modes? I think that would brighten things up a bit.

It is the same base color, there were just some changes to how the gradient was being created.

I thought this might be a quick yes/no question, but it looks like it will require a more involved discussion. I'm going to move forward with making the high-contrast particles look flat with a wide stroke as shown above, and the non-high-contrast mode exactly the same as the currently published version.

@arouinfar said "[T]he stroke is a really nice touch", so if you want to consider having the non-high-contrast particles look like the currently published version with just an added stroke, here is what that looks like. Please let me know if you'd like me to implement this (I'm assuming that I won't for now), or set up a design meeting if you feel it needs some discussion and possible real-time tweaking.

[arouinfar]

Please let me know if you'd like me to implement this (I'm assuming that I won't for now), or set up a design meeting if you feel it needs some discussion and possible real-time tweaking.

@jbphet if it's not too late, I would go ahead and add the stroke but leave the gradient alone for now. I think the screenshot in https://github.com/phetsims/build-an-atom/issues/217#issuecomment-763065212 is a definite improvement over the latest published version.

Iterating on the gradient would be nice, but I don't think it's a priority right now, so I would table it until this sim is revisited again.

[kathy-phet]

+1 on what @arouinfar suggested.

[jbphet]

It's not too late, it was just in time. I added the stroke to the non-high-contrast particles just before publishing the new feature. I ended up going with a slightly lighter stroke than what I showed in the previous screenshot because I felt it looked a little better. I agree that it's an improvement, and it looks nice in the nucleus of the atoms as well. Here is a screenshot:

I have published this to the main site after discussing with the QA lead. I'll let the teacher who requested the increased contrast know.

[jbphet]

This is done and the teacher has been notified. I'm going to close it, but will re-open if I hear that there are any problems.