Check red/green/yellow colors for accessibility

[dboyer]

The red, yellow, and green colors on the water column may fail accessibility checks for color blindness.

Learning specialists recommended using https://developer.paciellogroup.com/resources/contrastanalyser/ to check color contrast.

Note: changing these colors may impact colors used in other parts of MMW.

[dboyer]

@designmatty Could use a design consult on this.

[designmatty]

I ran the app with Protanopia color blindness simulation and the results are pretty telling of much needed change.

CURRENT COLORS: No vision deficiency:

CURRENT COLORS: Protanopia:

All of the colors are shades of orange/brown. It becomes difficult to tell which arrow relates to which attribute. The arrows blend into the illustration.

---

The following adjustments would likely get us to a pretty decent fix.

NEW COLORS: No vision deficiency:

NEW COLORS: Protanopia

The new colors are all visually distinct. There were still some issues with the arrows blending into the illustration so I added an outline to help distinguish the shapes.

[rajadain]

Thanks for putting this together! Should we also check for Deuteranopia?

Also, just to note, that these color changes will be carried through in the TR-55 model in the main app as well:

[designmatty]

This is how it might look for Deuteranopia: It's fairly similar to Protanopia

[rajadain]

Thanks for confirming, that looks good to me

[dboyer]

@designmatty We've received a request to also check for tritanopia (blues). Could you see how they look with that change?

[rajadain]

From this online simulator: https://www.color-blindness.com/coblis-color-blindness-simulator/

I'm seeing this for tritanopia:

In fact, the only case when I see problems if for monochromacy (or achromatopsia), those who can't see any color:

which is pretty rare (~1 / 30K people have it). I don't know if we are under obligation to support that.

If we do, we may have to move to using patterns in addition to colors, but that would be a larger design effort.

[rajadain]

@designmatty Can you post the hexcodes for the new colors please?

[designmatty]

@rajadain:

Evapotranspiration: #2d8bff Infiltration: #f8aa00 Runoff: #ed3b3b

[rajadain]

@designmatty the infiltration color listed above seems to be the same as before, more the orange than the yellow in your screenshot