Accessibility: Universal Principles of Design

This week we continue with the universal design principles, essential formulas for efficiency in your products. That is why today we will discuss Accessibility, a fundamental principle to break down social barriers.

Accessibility Universal Principles of Design

Why is accessibility so important in design?

The goal of accessibility is to empower each user, regardless of visual, motor, hearing, speech or cognitive disabilities, offering the same experience or as similar as possible. The objective is not to put barriers to the condition of any person.

"Disability is NOT a disease, it is a condition that has different causes that result in a person having a capacity (or several) that make it different from the majority in society."

Accessibility principles in web & APP design

There is a myth in Web & APP design and development that making it accessible is difficult and expensive, but it doesn't have to be if you look at it from the start.

1. Color contrast 🖍

Color contrast is an accessibility issue that is often overlooked. People with low vision may find it difficult to read text that has a background color and consequently low contrast. The World Health Organization (WHO) estimates that there are 217 million people who have moderate to severe visual impairment. Therefore, it is essential to consider the color scale of your design so that it has enough contrast between the text and the backgrounds.

According to the W3C, the contrast ratio between the text and its background must be at least 4.5 to 1 (conformance level AA). The ratios become more tolerant of larger and heavier fonts, as they are easier to read with lower contrast. In any case, as it is a design principle in accessibility, we encourage you not to settle for the recommended minimum of 4.5 to 1, but to seek the highest level of compliance, the AAA, which should be 7 to 1.

2. Use a range of colors and patterns to make important information understandable 💈

When you have to communicate important information, a CTA, call to action, or any action required by the user, you should not use colors as the only visual signal. People with low visual acuity or color blindness will have difficulty understanding the content.

You should try to use an indicator other than just color, such as text labels or patterns. When you show errors on the screen, do not rely solely on the color of the text, add some iconography or include a title to the message.

Items with more complex information, such as tables and graphs can be especially difficult to read when only colors are used to distinguish the data. In this case, use other visual aspects to communicate the information, such as shapes, labels, or patterns as fill to make the differences more evident. A great example is Trello's colorblind mode that uses patterns:

Trello colorblind mode

3. Use labels or instructions on the forms ✏️

Mr. López from UX Collective

Designing the labels of the fields of a form inside is one of the biggest design mistakes. In our team, Chiyana always reminds us that we should NOT hide information from the user, we must help them to always be in context. We might be tempted to follow trends to make our design simpler and more modern, but this decision would be a huge barrier for many people. The text inside the forms, the placeholder, is usually gray and has little contrast. And if you still have doubts, I invite you to return to point 1.

This simple practice will help people understand what to do when writing on a form. It is better if the field labels do not disappear, people should never lose the context of what they are writing.

4. Accessible sources 🅰

Font size, line spacing, and typography affect the readability of the content.

Line spacing

Currently, the default browser line spacing is approximately 1.2, however according to WCAG it should be at least 1.5.

Typography

Great as Google Fonts are, they can have performance implications or are difficult for visually impaired users to digest. When in doubt, it is always best to use fonts that are native to the operating system, such as Tahoma, Times New Roman, and Arial.

Conclusion

Considering these accessibility principles in your designs is essential to break down barriers. The goal is to make designs universal, so that it is effective for all people, regardless of disability, financial status, age, education, or geographic location. A good trick to evaluate your design and empathize with the user is to print the design in black and white and 30% smaller, to see if you can understand all the content.