Neumorphism vs Accessibility

2019, when people could just go out to grab a bite, brought in a new way of designing subtle UI elements. This style resembles skeuomorphism but instead of being an exact replica of the real, it is a replica of a representation. Imagine a wallet, made with white leather, placed on a bright white surface. The style is elegant, with subtle shadows, glows and considers the properties of the material. The entire UI feels rich! 

And then, I went and started working for the UN!

The United Nations is for everyone and they have very strict guidelines about the way content is placed on the webpage, especially for people with visual disabilities like colourblindness, blurred visions and limited vision. All the rules to be followed to design a compliant page are mentioned in a document named web content accessibility guidelines; WCAG for short. This tenure also introduced me to some amazing tools developed by people to understand how people with visual impairment see these webpages. So I decided to take a few examples and check them for the WCAG - A level. One can easily tell that the neuromorphic designs are going to fail the WCAG - AA test, without any tools. Following are the guidelines for any interface to pass the WCAG AA test:

• The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: 

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that is not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

• Logotypes: Text that is part of a logo or brand name has no contrast requirement.

I decided to use web disability simulator for the same. I had been using it extensively to simulate colour blindness and making sure that warning signs I put up on the webpages bear enough contrast and thus, attract attention. Web disability simulator is a simple chrome extension that allows you to simulate blurry vision, outdoor conditions, colour blindness, dyslexia (I am one so I didn't need this!). The results were fascinating.

• Colour Blindness

While using the colours on the screen, this trend focusses on gradients and the same coloured shadows. While a person with a healthy vision can easily read the value written on grey background, for a person with colourblindness, it is extremely difficult to read it. The simulated result is from Red-Green colour blindness.

When it comes to total colour blindness, extra care must be taken to provide additional information depicted by the colour to the people using the application.

• Sunshine

Sunshine is not really a disability, but a condition to which every single one of us could be exposed to. While this new trend focusses on the delicate shadows and faint coloured icons, a little bit of sunshine can cause the design to fail miserably. In the above example, we can see the options of signing up with email/phone vanishes off the screen real quick. Since mobile devices are always on and could be used under direct sunlight, this is an issue worth considering

• Blurred Vision
  
  

With prolonged exposure to the screens, the eyes may eventually develop a blurry vision. This is a very common problem, which can be fixed with spectacles. But while designing, it needs to be considered that the spectacles might not always be on the eyes. (if you have them, try lying down with spectacles on!). When this happens, the light shadows become invisible, making it difficult to identify the shape and thus meaning associated with it. Since the trend also focuses on the low contrast text, it becomes very difficult to read something if the text size is really small.

In the image above, the vital pieces of information like AC is turned on, the engine is in sleeping mode etc, are mentioned in small texts and in low contrasts. With blurry vision (simulated below) they are extremely difficult to read.

• In conclusion:

I accept wholeheartedly that neumorphism or soft UI is an elegant trend. The only suggestion would be to follow a few guidelines to make sure it is enjoyed by all!

• Do not use colour as the only way to convey information, indicate an action or identify an element. For example, do not mark an incorrect form field with a red border only, also supplement with a text and preferably an icon.

• Consider offering a high contrast mode.

• Avoid text in small font sizes and long texts. Use proper spacing and line-height.

• If possible, use text to speech services to help read out the text

• Provide enough contrast between the text and its background. Use a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

• Have enough space between components.

Once all these suggestions are followed, I am sure, this trend can keep making the UIs elegant and at the same time, usable.