Color of interaction hint makes it difficult to see

[jessegreenberg]

I noticed the teal interaction hint on the blue background was a little hard to see. Here is a colorblindness simulator (no idea if it is legit...)

@BLFiedler is this an issue? Feel free to close if not.

[brettfiedler]

Agreed. Green-blind is a little rough too. Let me see if there's anything that works a bit better across all.

[brettfiedler]

To mesh with the background, we can't really go more blue/purple, and more yellow is mostly too much like the shape color. Green will have to be the one. If we go for more of a "mint green" by desaturating, it is fairly contrasting across monochrome, green blind (and red blind as well).

Value used: #b5ffd8, rgb(181, 255, 216)

Whaddya think? @jessegreenberg

[brettfiedler]

Made the change above. I'll keep this open a bit longer assigned to me in case I have a moment to ponder a better interaction cue.

[terracoda]

Sharing some WCAG resources that I am reviewing to see if they are helpful. https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

• For graphical elements we should be able to use the contrast ratio guide used for Large text (3:1)

[terracoda]

I would be more concerned about how good the contrast is between the focus highlight (and Interactive Highlights) is when compared to the background color.

Quoting guide:

The intent of this Success Criterion is to ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision.

It is important to consider that in our sims in addition to good contrast, people can zoom in and people can use focus highlights (or interactive highlights). In addition, there is Voicing that can be enabled to assist a learner with additional needs.

This success criterion does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast.

The dashed visual hint is not the only indicator that the corners an sides are interactive. I think we would document that actual contrast ratios and make decisions from there.

Regarding conflict between visual hint and the grid, we could consider other colors if the grid is enabled, but honestly the shape itself has black outlines, and the pink highlights would still have high contrast over the grid, so I kind of feel like we are good.

It would be good to note the actual contrast between the current colors. Here are a few I grabbed with a color picker. These colors are all in our code somewhere.

• background is rgb(133, 133, 255) or #8585FF: visual hint is rgb(181, 255, 216)
• background: pink highlight is rgb(242, 46, 139) or #F22E8B

[terracoda]

Ok, the foreground-background contrast ratio is low. We should be aiming for 3:1 for user interface components.

Is the grid white? We obviously need a dark-ish background for the grid. I don't want us to panic on this. I need to understand what colors are essential?

[brettfiedler]

If you'd like to, you can directly play with the colors by changing this file: quadrilateral\js\QuadrilateralColors.ts

[brettfiedler]

Could go this direction.

worst contrast comes in blue-blind:

monochrome isn't terrible:

  screenBackgroundColorProperty: new ProfileColorProperty( quadrilateral, 'background', {
    default: new Color( '#C4A484' )
  } ),

  quadrilateralShapeColorProperty: new ProfileColorProperty( quadrilateral, 'quadrilateralShape', {
    default: new Color( '#FFD700' )
  } ),

  interactionCueColorProperty: new ProfileColorProperty( quadrilateral, 'interactionCueColor', {
    default: new Color( '#7DF9FF' )
  } )

Better, but not perfect (3:1)

[terracoda]

Further reading... the outline color of the shape is black, so it is in high contrast between both the shape color and the background color.

The shape is visible to people with low vision. We are exploring a background color that might provide a better contrast with the pink highlights and visual interactive hints.

We also thickened the diagonal guides so they are easier to see when aligned with a gridline.

[brettfiedler]

Changes made locally. Will push separate commits for each change later after I get latest changes into my copy.

[terracoda]

From the top of the success criteria documentation

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): Graphical Objects Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

The outline of the shape is in high contrast with the adjacent colors (background color and shape color), so we are totally good there.

[brettfiedler]

Hadn't realized I had these commits in the push I made (had some git VSCode integration issues...) , but worth reviewing anyway.

This is a big color change, but does represent some review @terracoda and I did together a couple of weeks ago. Contrast is good now with this slightly less bright color. We made some thickness changes to various borders/grid lines/diagonals/interaction cues as well to help with contrast. We tried not to change the shape color, but

Calling all interested parties to see how they feel about it: @terracoda @Ashton-Morris @emily-phet

[brettfiedler]

Oh, also I now realize I used hex codes for the colors for copy-paste expediency from the color picker. Is that alright, @jessegreenberg, or should I go back and convert to RGB for consistency?

[jessegreenberg]

Should be totally fine to use hex codes.

[jessegreenberg]

Those filter tests look really nice! But I have to admit I am not crazy about the yellow shape + tan background combo.

[brettfiedler]

Going the other direction! White is where we should have started. We compared using a white background with using a light blue like Calculus Grapher. Both are fine.

It might be a good time to try out having the play area and the rest of the screen background be different colors.

@jessegreenberg indicated this is a simple change to make the grid fill be adjustable in quadrilateral\js\QuadrilateralColors.ts.
Go for it!

We'll try out the white fill and light blue (#F3FCFE) for the control area. I have a multitude of color changes saved locally for borders and grid lines to accommodate the swap from dark to light background, so I can take care of those changes once the property is accessible from QuadrilateralColors.ts.

[terracoda]

The lighter colors do not seem as fun.

[jessegreenberg]

OK, I added a gridFillColorProperty and set to white. Then I made the background fill color the suggested light blue. Just so things are still visible I also changed:

• gridLinesColorProperty to black
• diagonalGuidesStrokeColorProperty to black
• gridStrokeColorProperty to black
• interactionCueColorProperty to blue

Back to @BLFiedler and @terracoda to play with other colors now that grid and background are separated.

Here is what it looks like now:

I think it is nice and will match calculus-grapher! But I like that we have flexibility to make the background color more fun if we want since it doesn't have to match the grid fill.

[jessegreenberg]

Sorry, looks like I did not push this on Friday. Pushed.

[brettfiedler]

Sorry for the delay. Colors changed! There is one issue with the grid displaying over the play area boundary which is evident now that they are different colors. Can we cut off or draw the grid under the boundary?

@jessegreenberg ,

• [x] Make that overlapping grid disappear!

[jessegreenberg]

Great! These colors look so fun 😄

Changed in the above commit, how is that?

[brettfiedler]

Bam! Calling it. Thanks!