1165748 - Color-blindness audit and solution

Status: RESOLVED INCOMPLETE

(Firefox for iOS :: Theme & Visual Design, defect)

Description

[Boris Dušek]

Color-blind people need the UI to convey information not by color alone.

I found two issues in Firefox for iOS:

1. Reader Mode button (in url bar) available vs. active status is differentiated only by color (black vs. orange), no change in outline/shape.

2. Selected panel in home panel is differentiated only by color of the icon's outline (blue for selected, gray for non-selected) - selected color could also be distinguished by being filled inside the outline (just like the Bookmarks button in the toolbar, which does this and thus is "color-blind-proof"), or making the outline a little bit bolder (thicker than the non-selected panels).

Can be nicely tested by turning on for a while this setting: Settings.app > General > Accessibility > Grayscale. Then you basically become color blind (in a basic way) until you turn it off :-)

Then use the app and find "color-blind spots" ;-) Please note that tweaking only the colors to be better distinguishable in the Grayscale mode is not a good strategy as different types of color blindness can perceive colors differently (i.e. not in a way identical to the iOS Grayscale mode) - i.e. what one color-blind person perceives as sufficiently different colors could be perceived as same colors by another person with different type of color-blindness. Unlike that, thickness and fill are 2 good, reliable solutions (that does not mean there are not others).

Comment 1

[Darrin Henein [:darrin]]

Attachment: https://github.com/mozilla/firefox-ios/pull/699

Looks good. I vote we don't fix #1 right now, it should be apparent by the UI below which state you are in.

Comment 2

[Robin Andersen [:tecgirl]]

:darrin what do you think about an inverse of the RV indication icon, but keep it orange?