How to Combine the Art of Color and Accessibility Principles?
2 min read
Speaking about creating digital products, we, as designers, should understand that the matter is not the subjectivity of color and font combinations but the consideration of design principles and rules, end users, and meeting their needs with a given product.
"Art is messy, art is chaos — so you need a system" — Andrew Stanton
A systematic approach helped us create a high-quality and accessible concept of a mobile application for users who care for people with dementia.
Researchers at the University of Southern California are investigating the psycho-emotional aspects of ongoing care for people with dementia. Based on their research, they have developed a test to detect changes (improvement or deterioration) in the user's condition. The next step in the research is developing an app.
This app is a pocket-sized assistant that enables caregivers to take a test to check the patient's condition and find information resources such as videos and articles.
After conducting detailed UX research, we identified 3 main UX personas:
The creation of these UX personas made it clear that the app's target audience would mostly consist of older people, so the design should be tailored to accommodate this aspect.
Do designers always notice unreadable text and lack of contrast? Do you conduct contrast tests when creating a concept?
The internationally established accessibility requirements that must comply with WCAG 2+ (Web Content Accessibility Guidelines) also apply to the contrast of elements in digital products. In particular, the contrast level should be 4.5:1 and higher. Lower values indicate that the app is useless for certain categories of users or in specific circumstances.
For example, have you ever encountered a situation where you can't read the text on the screen when the sun is bright? If so, the accessibility of a digital product is compromised.
Using WebAIM, a tool called Contract Ratio, we tested the concepts and got the following results: some texts did not reach the 4.5:1 ratio, meaning they did not have enough contrast and would be inaccessible to certain user categories.
Based on the first results, we adjusted the colors and achieved a contrast ratio of 4.5:1 and higher, making the texts more readable.
Our next step was to test the design for perception by users with color blindness.
To do this, we used the Google Chrome extension — Colorblindly
Testing has proven that texts are readable even for people with various color vision disorders thanks to well-chosen colors.
Mobile app development cannot be based on the designer's subjective perception of colors and their combinations. Such a process requires a systematic approach, consisting of following the principles and rules of accessibility, conducting the necessary research, and testing the design to verify the accessibility.
Have you come across any apps worth testing for text contrast and accessibility? Share your experience with such apps in the comments👇🏻
