Distinguishing colors can be hard, for some people particularly red and green. Thus, conveying meaning by color alone isn't doing any good for these people.
So, how can we help – not just people with color deficiencies – but people in general when designing user interfaces? By leveraging other cues such as shape, position and distance.
Google Material Design is a relatively new design language and philosophy introduced for the Android operating system. Google has created a rather extensive and thorough website documenting the thoughts behind and specifics of the design. Very impressive indeed.
However, in one area, things aren't so impressive. The documentation makes use of illustrated Do's and Don'ts scenarios, see screenshot below. While a very good idea on itself, the visual execution is lacking in terms of usability.
Some things are done right:
Still, the primary means of conveying meaning are equally shaped horisontal colored bars. Green for "Do" and red for "Don't". Not easily distinguishable for a great number of people.
So, how can we remedy this? By using shape, like for instance, changing the styling of the colored bar (e.g. use CSS
border-style: dotted in this case).