Color-blindness audit and solution

RESOLVED INCOMPLETE

Status

()

defect
RESOLVED INCOMPLETE
4 years ago
a year ago

People

(Reporter: dusek, Unassigned)

Tracking

(Blocks 1 bug)

unspecified
All
iOS 8
Dependency tree / graph

Firefox Tracking Flags

(fxios-)

Details

Attachments

(1 attachment)

Reporter

Description

4 years ago
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).
Looks good. I vote we don't fix #1 right now, it should be apparent by the UI below which state you are in.
Attachment #8631811 - Flags: review+
:darrin what do you think about an inverse of the RV indication icon, but keep it orange?
Flags: needinfo?(dhenein)
Flags: needinfo?(dhenein)
Status: NEW → RESOLVED
Last Resolved: a year ago
Resolution: --- → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.