Red/Orange/Green comparative colors unusable if colorblind

[Summertime]

What

• Red/Orange/Green comparative colors unusable if colorblind
• This becomes exacerbated if night mode is enabled

Expected behavior

Symbols to be placed in the colored icons (Ticks for good things, crosses for bad things, ~ for so-so things), or over icons (crossing out the vegan icon when a product is not vegan)

Project

Open Food Facts

Installation method

F-Droid

[Lee-Carre]

Accessibility (and usability more generally) is its own rabbit hole. Though, there are some basic principles & concepts.

Re colour (specifically); avoid colour being the only thing which distinguishes important elements. Also use (for text) styling (such as bolding/italics/underlining, and/or different font-faces), for widgets use symbols (with a coloured background, by all means), for images/areas you could use different patterns (cross-hatch, dotted, dashed, and various geometric). Other ideas are also possible, this isn't an exhaustive list.

When designing/developing, use various filters (there are specific ones for various vision-impairment conditions, such as the various colour-blindness types (yes, there's more than one)), and other general ones such as greyscale (under which red is often indistinguishable from black; this will show situations where adjacent colours are low-contrast; solve by increasing the contrast between selected colours; yes, some people have no colour perception at all but can determine luminosity quite well; they essentially see in what we'd call greyscale).

More broadly, you'll want to consider other vision-impairments. There are quite a variety. Examples include;

• loss of acuity
• tunnel vision
• loss of central vision but retention of peripheral vision
• many more; that would be a whole essay/book by itself; consult medical sources, and/or formal accessibility resources

There are lots of resources on the InterWeb, including for GUI design. There's a wealth for Web accessibility, which would be a good starting point. A quick Web-index query yielded A Total Guide to Accessible Colors [Including Palettes & Templates] which seems clueful, and a good intro. But, there are many other resources (including many books; it depends how deep you want to go). Don't focus only on colour; that's just one example of where accessibility matters.

You might also want to consider consulting organisations which support those with vision-impairment. Some charities come to mind, such as the RNIB. They'll very likely have guidelines, or at least pointers to relevant materials.

Think of it in terms of interaction design; enable the user to retain control, and use defensive design (assume the worst case scenario). The golden rule (borrowing from e-commerce); if the user can't clearly see your UI, then they can't interact with your UI, can't use the software, and thus can't benefit from it or contribute.

Beyond accessibility (ensuring usability for those with disabilities), there's universality (making things accessible for everyone, but not at the cost of usability for those with disabilities).

I would imagine that Google/Android has published some kind of guidance on such basics, too, for developers.

Start with the basics; they'll be most crucial (akin to critical/blocking bugs). Later, attention can be given to the finer details.

Symbols to be placed in the colored icons (Ticks for good things, crosses for bad things, ~ for so-so things), or over icons (crossing out the vegan icon when a product is not vegan)

Sensible suggestions. Depending on other factors, maybe consider (simple) emoticons/emoji. However, user-testing will be key to determine what's best. Speed of recognition, and being widely-recognised (as in, not culturally dependent) is important. User-testing is the only reliable way to determine which design is more effective. Often the results are surprising.