Designing isn’t just about  making everything look as good as possible. It’s also about improving accessibility. Here’s our way to improve accessibility in apps with the use of color.

Colors are essential in design. They generate different sensations when they’re seen and also serve to influence users when making decisions. But designers do not use it only to make a good impression on the user. It is also very important to improve accessibility in apps with the use of color.

By focusing on psychology and standard color theory we often do not take into account a part of the population that sees colors in a different way. The different pathologies that these people live with can make your application, no matter how beautiful or colorful it is, unreadable.

Why be accessible?

mejorar la accesibilidad en las aplicaciones con el uso del color

Even though it sounds like a lot of work, to make an accessible app, it’s not as complicated as it seems. In fact, it’s almost more complicated to make it inaccessible. By planning usability schemes, using color theory and good contrast, you can generate applications that are perfectly accessible to the user.

It is not only the ethical aspect of helping visually impaired people to use your applications. But a non accessible app is really frustrating and it harms the experience of users with or without pathologies. The more complex your app is in terms of color and experience, the more complications it has for the majority of the population. If this is not enough for you to start designing in an accessible way, here are some more reasons:

  • The more accessible your app is, the better repercussions it’ll have in the app stores. It will improve your ASO (App Store Optimization).
  • It gives you an advantage over your direct competitors, because if your app is accessible and your competitor’s not, this will not help you get those potential consumers.
  • Non-accessible apps can incur legal problems in some countries for not providing equal opportunities to people with disabilities of any kind.

Accessibility is something that has been in the DNA of Chubby Apps since its inception and is something we could not leave out at  Cori.

Challenges to consider

accessibility in apps with the use of color

Making a completely accessible app is an impossible task. And even more so with the many limitations operating systems have. Not only because it’s difficult to know how people with different visual pathologies perceive colors, but also because the average user perceives colors differently, and on a psychological level, together with an affective and tonal level.

There is some research that sheds some light on how people with different pathologies see, even so today it is still a challenge to improve accessibility in applications, with the use of color.

accessibility in apps with the use of color

Pero hay una serie de pasos que hacen que tu aplicación sea más accesible, así como el texto negro sobre fondo blanco está determinado por el alto contraste entre ambos colores. También se deben resaltar los elementos de navegación para que los usuarios puedan diferenciar rápido que elementos son accionables dentro del contenido principal:

But there are a number of steps that can make your application more accessible. For example,black text on a white background is determined by the high contrast between the two colors. Navigation elements should also be highlighted so that users can quickly differentiate which elements are actionable within the main content:

Do red and pink go together?

Anyone who knows me knows that I love the combination of pink and red. I am a firm advocate that they are two very friendly and approachable colors, but there are times when they are not the best choice.

Quien me conoce sabe que me encanta la combinación de rosa y rojo. Soy una firme defensora de que son dos colores muy amigables y cercanos, pero hay veces en que no son la mejor opción.

White

Grey

Anthracite

And why, you ask? Because of the lack of contrast. Patricia, then what do we do if we discard all these colors? Actually it wouldn’t be necessary, you just have to take into account that the contrast is enough so that you can distinguish one tone from the other. If you use a very light pink in the background and a very dark red in the text you will generate a very good contrast, but you have to be careful.

Combinations to avoid

Hay un tipo de dificultad visual que conocemos prácticamente todos. Y es el daltonismo. O es que acaso no has probado a ver un número realizado por círculos dentro de un círculo. El daltonismo es una dificultad para distinguir el rojo/verde y el amarillo/azul. Una patología que afecta entre el 6% y el 8% de los hombres y menos del 1% de las mujeres. ¿Y qué podemos hacer para ayudarles?

There is a type of visual difficulty that practically all of us know. That’s color blindness. Or haven’t you ever tried to see a number made up of circles inside a circle? Color blindness is a difficulty in distinguishing red/green and yellow/blue. This pathology affects between 6% and 8% of men and less than 1% of women. And what can we do to help them?

Blue

Purple

Blue

Green

Avoid these “dangerous” combinations:

  • red/green
  • yellow/blue
  • brown/green
  • green/bue
  • purple/blue
  • grey/blue
  • green/grey
  • black/green
  • yellow/light green

The best option? Complement

Blue

Purple

Complementary colors (those that are opposites on the traditional color wheel) are best for great color contrast. Except for matching red and green which are opposites on the color wheel.

Contrast between cool and warm

Red

Blue

The color wheel can also be divided into cool and warm tones. Something as simple as dividing the wheel in half between the cool colors. Blues, purples and green versus the warm ones: yellows, oranges and reds.

In most cases the contrast generated between cool and warm colors works perfectly to create accessible designs. And if you use a darker shade of a cool color with a lighter shade of a warm color, the contrast and legibility will be greater.

The simplest: monochrome

If you are afraid of making mistakes using different tones, then you should use color combinations within the same color shade. This will ensure readability for color-blind users and you’ll avoid making any mistakes. 

Pink

Pink

Don’t be afraid of textures

The use of textures adds an extra element to the compositions, which can help people with low vision or color blindness to detect objects. Just as in plain text it is easier for us to differentiate bold, thick lines or titles by the thickness of the letters.

Of course color is not the only thing you need to consider when creating your accessible app. There are many other aspects to take into account, but it’s a good place to start. 


If you want to know more about us and our project, don’t forget to follow us on Instagram, Twitter, Facebook or LinkedIn.