Digital accessibility in the design process.

As a creator of graphic designs, we often subconsciously follow aesthetics within our own individual tastes. Eye-catching design can attract customers hungry for inspiration and nice projects. Remember, however, that the role of a graphic designer is something much more significant than being the author of beautiful concepts.

In this article, we would like to take up a very important issue related to the usability and digital accessibility of our work in design circles. Recently, a conversation about accessibility took place in our office. The conclusion of the conversation was that we will pay more attention to the so-called digital accessibility for people with disabilities - specifically visually impaired people. This group includes users, among others with blindness, reduced visual acuity, color blindness, astigmatism, etc.

We should also remember that digital accessibility applies to every recipient of content on the Internet - we want to draw attention to this problem and show you how you can improve the comfort of reading and navigating in the Internet sphere.

What is accessibility?

Accessibility (also called ally for short) is, simply speaking, a set of standards describing the methods and guidelines for creating websites in a way that allows convenient access to the widest group of recipients.

Accessibility is divided into: Web Accessibility, Software Accessibility and Assistive Technology. The idea behind ally is to overcome the limitations that result from different types of disability. Availability depends on many interacting elements. Tools are important, so appropriate Internet software and the awareness of people who create websites.

The main reasons why web pages are unavailable is that web tools do not support accessibility sufficiently, and web developers are unaware of or do not understand basic aspects of it.

We will try to show how, by using colors, contrast or the size of the font in the design, as designers, we are able to contribute to raising standards and awareness related to digital accessibility.

Let's move on to the examples.

As UX and UI designers, we should make sure that our products are available to everyone, regardless of health or intellectual level. How can we work with contrast, color and size to make our design more readable? Below you will find some examples of good practice we have prepared.

At Vision Trust, we use a plug-in dedicated to the Figma program. The plugin is called Contrast and you can find it HERE.

The examples we have prepared for you are based on this plugin. It is a very simple tool that does not require any additional work from the graphic designer - the only thing that needs to be observed is the behavior of the plugin, which will provide the contrast ratio along with positive and negative levels.

Contrast works on any element, not just text, in addition, it updates the information live when you change the color, opacity or blending of the selected element. So how do you improve accessibility? We are already showing!

Text

If we care about the appropriate contrast of the text, in our practice we avoid using essential information in a similar color of the text and background.

Texts are easier to read, have a lighter background and a darker font color. We will show you how a slight difference in contrast affects the visibility of the text in the design. It is also worth mentioning in this context the selection of colors for the entire project.

We often create three types of color for a project - dominant, contrasting and additional. Based on this color palette, we can create really interesting designs. Remember that less is more, which also includes choosing the color palette of the project.

Text size

Our practice of selecting the size of the content depends primarily on the design and the font itself. In this case, we follow a simple rule: the more decorated and irregular the font, the larger its size in the design. Vision Trust assumes that the safe size is approx. 14 pixels. It is also worth adding that this size applies to secondary texts. We use larger sizes for important content and key information.

Remember that the right contrast is important not only for people with disabilities - it will facilitate the reception of all users. Even for a healthy person, on a sunny day on the phone, low-contrast content will not be readable.

These simple rules and awareness of working with contrast are not only good practice that facilitates digital accessibility. These are general accessibility rules that have been developed and described in WCAG 2.0 standards

WCAG 2.0 - Web Content Accessibility Guidelines

The rules for constructing accessible websites are specified in the document developed by the International W3C Consortium - the WCAG 2.0 standard. Following the guidelines allows you to create a properly built website that will be friendly to all Internet users. The specification is considered to be the most important document, containing a number of guidelines for accessibility, and mainly aimed at web developers.

Among the participants of this organization, it is worth mentioning: IBM, Microsoft, Bell Atlantic, Lotus Development Corporation, the Canadian government, the National Institute on Disability and Rehabilitation Research (operating at the US Department of Education), representatives of the European Union.

We also encourage you to read the WCAG 2.0 Web Content Accessibility Guidelines: HERE.

A drop in the sea of needs.

What our article is about is literally a drop in the ocean of needs. The topic of internet accessibility is as broad as a river. In today's world - increasingly dominated by information and new media, this problem is gaining in importance and publicity.

It is worth realizing that clever design is also a useful design. We therefore urge all web developers to explore the subject of digital accessibility. Opening up to a different view is a tribute to those who struggle with social exclusion on a daily basis because of their disabilities.

________

Would you like to implement a branding, website or a mobile application, but you do not know where to start?

?? Write at [email protected] and let us find your place in networkspace.

Enjoy and have a nice day! ??