:C:O:L:O:R:S: a symbol for each color

Communication code (+ ai app) for colorblind people, created by Enrico Bisenzi.

After Agenda Digitale amplified my idea by publishing it on https://www.agendadigitale.eu/ cultura-digitale/codice-salva-daltonici-simboli-sui-colori-grazie-a-unapp-con-ai/ and many of my partners expressed interest in implementing it in our joint projects, I decided to submit my idea in English language (thanks DeepL!) to organizations involved in inclusive design solutions for color blindness with the aim to understand it is or not a great idea.

LOGO :C:O:L:O:R:S: provocatively composed of color shades that are problematic for colorblind people.

What is the problem?

Eight percent of males and a significantly smaller percentage of females are characterized by some form of color blindness, meaning they cannot perceive red (protanopia), green (deuteranopia), yellow and blue (tritanopia) and, in rarer cases, any color (achromatopsia). Respecting the needs of these people is not only a regulatory obligation for public bodies and many private sectors (including transport and e-commerce) “Color should not be used as the sole visual means of representing information, indicating actions, requesting responses, or as an element of visual distinction.” However, the issue of correct color contrasts has become popular since Italian soccer reversed its decision to adopt an orange ball, as n

How can the problem be solved in theory?

When color is assigned a function or informative value, it would be sufficient to associate the color with a model or pattern, or even just a symbol, in order to make the graphics fully accessible to colorblind people, regardless of the colors used!

What happens in practice?

Authoritative sources of information continue to produce graphics that are completely incomprehensible to colorblind people. Even during the Covid epidemic, at a time when communication was of high strategic value, Johns Hopkins University, Il Sole 24 Ore, and many other media outlets persisted in producing ‘graphics’ that were difficult for colorblind people to interpret (not to mention weather forecast graphics).

A striking example of this critical issue

Let’s try using Google Trends to see how the popularity of Milan, Florence, Rome, and Naples has changed over time.

The popularity of cities is associated exclusively with the color yellow for Rome, the most popular, followed by blue for Milan, green for Naples, and red for Florence.

The exclusive association of information with color is striking and brutal: the most problematic colors are used, namely yellow, green, red, and blue!

This makes the graph difficult to interpret for colorblind people, especially those with protanopia and deuteranopia (the most common forms of colorblindness).

Two lines, two dots, and two bars out of a total of four are absolutely indistinguishable.

Green and red are indeed the most problematic colors for colorblind people, but that does not mean they cannot be used: think of traffic lights, where the equivalent information “GO” or “STOP” is also associated with the vertical positioning of the road sign!

An idea for a communication code + app to solve the problem

In the first case mentioned above, Google Trends, all you need to do is use a hypothetical app on a smartphone, smartglasses, or CMS (for the web) to label critical color shades with a symbol such as :R: for red, :V: for green, :G: for yellow, and :B: for blue. It is advisable to use the initial letter of the color as a symbol because the choice of color often also has semantic value, for example, red for danger and green for go ahead.

Labels identifying colors, such as :R: for Red, make the graphic accessible to colorblind people.

The customization of the app options I have proposed should allow other symbols to be used for other languages, for example :R: :G: :Y: :B: for Red, Green, Yellow, and Blue in English. The same options should make it possible to indicate one’s personal form of color blindness and also the resolution for achromatopsia: in the latter case, different numerical codes should be assigned to each different color shade. It should be noted that the use of :C:O:L:O:R:S: one symbol for each color is only necessary when you understand that you are dealing with graphics with functions or information assigned exclusively to color.

Not only in the digital infosphere but also and above all in real life, certain color choices can affect the daily lives of colorblind people.

Red is associated with a faulty door and green with a working door, but what about those who suffer from protanopia and deuteranopia?

Once again, red and green, with their negative and positive connotations respectively, are used here to indicate a critical condition and/or normal functioning. But what about those who have difficulty distinguishing red from green?

In this case too, the use of the :C:O:L:O:R:S: app could be useful, as it teaches us that when the door is closed, the light signal :R: appears, and when it is faulty, the symbol :V: appears (or :R: and :G: if the app is configured for English).

The color red is overlaid with the symbol :R: The color green is overlaid with the symbol :V:

How applicable is this idea?

I believe it is quite easily applicable, having created some of the graphic solutions proposed here with the help of artificial intelligence using prompts corresponding to the functionality of the hypothetical app, even managing to create a working web app prototype in a few minutes thanks to Claude.ai artifacts (albeit characterized by the usual inaccuracies = hallucinations).

Color analyzer upload an image and discover the symbols superimposed on the colors drag an image here or click to select thus labeling Red with :R:, Green with :V:, Yellow with :G:, and Blue with :B:.
The AI only recognizes red and yellow and applies the corresponding symbols in a disorderly manner.

Solution distributed under a Creative Commons BY-SA-NC license, i.e., with attribution required, distribute.

Author Enrico Bisenzi, ABA teacher in Rome and part-time inclusive designer

Published by:

Avatar di Sconosciuto

Enrico Bisenzi (UX Inclusive Designer)

Autorizzato eventualmente dalla mia istituzione - Accademia di Belle Arti di Roma - posso erogare corsi di formazione online e in presenza, analisi tecniche e supporto per conformarsi alla normativa vigente in tema design della comunicazione accessibile. Approdato all’Accademia di Belle Arti di Roma dopo aver insegnato in accademie pubbliche e private (Carrara, Bologna, Pisa, Firenze), come libera professione ha supportato numerose agenzie digitali in ambito SEO (Search Engine Optimization) e usabilità del digitale. Fra i primi in Italia ad occuparsi di inclusive design teorizzando l’esigenza di uno strumento di helpdesk per l’accessibilità per conto di INDIRE (Istituto Nazionale Documentazione Ricerca Innovativa), ancor prima che diventasse obbligo della normativa AGID (Agenzia per l’Italia Digitale). Ha contribuito dal 1999 ad oggi al restyling di decine di progetti di comunicazione digitale di rilievo fra i quali il primo portale online di libri Zivago per Giangiacomo Feltrinelli Editore, l'Ospedale Fondazione Istituto San Raffaele di Cefalù, un sito Web di Olimpiadi Internazionali, il portale del turismo del Comune di Milano, il sito Web del Comune di Firenze (e di altri comuni del circondario fiorentino), il sito Web personale del musicista Stefano Bollani, nonché di numerose agenzie assicurative di rilievo nazionale e di recente dei Teatri della Toscana. Sempre in tema Inclusive Design ha partecipato a progetti di ricerca quali ad esempio il manuale di sviluppo per produzioni di animazione, video e live digitali XS2Animation. Innamorato della Natura in tutte le sue forme cerca di coinvolgere le giovani generazioni nel riconoscere la biodiversità in ambito urbano attraverso gli Urban Nature Tours anche attraverso gli strumenti della comunicazione digitale che cerca di interpretare in maniera 'inclusiva'. Tutto i post realizzati sono rilasciati sotto licenza Creative Commons CC BY-NC-SA Attribuzione – Non Commerciale – Condividi allo Stesso Modo.

Categorie accessibilitàTag , , , Lascia un commento

Lascia un commento