Come usare bene il contrasto nel tuo brand
Il contrasto è la differenza di luminosità tra il testo e ciò che c'è dietro. Quando è basso, il testo si legge a fatica: su uno schermo al sole, su uno smartphone con la luminosità al minimo o per chiunque abbia una vista ridotta. Per questo le linee guida di accessibilità WCAG fissano un minimo misurabile.
Cosa significano AA e AAA
- AA, testo normale: 4,5 a 1. È il minimo consigliato per paragrafi, menu, pulsanti e moduli.
- AA, testo grande: 3 a 1. Vale per titoli da 24 px in su, o da 18,66 px in su in grassetto.
- AAA: 7 a 1 e 4,5 a 1. È il livello più esigente. Conviene puntarci nei testi lunghi.
- Icone e bordi dei campi: 3 a 1. Anche gli elementi grafici necessari per capire o usare qualcosa hanno bisogno di contrasto.
Contrasto e colori del brand
Molti brand hanno un colore principale che funziona benissimo come sfondo e malissimo come testo, come i gialli e gli azzurri chiari. La soluzione non è cambiare il brand: è definire nel manuale quali combinazioni si usano per il testo e quali solo per sfondi, forme o dettagli. Di solito bastano due o tre varianti più scure o più chiare dello stesso colore.
Quello che il numero non misura
Il rapporto di contrasto non tiene conto dello spessore del carattere, della dimensione reale sullo schermo né del daltonismo. Un carattere molto sottile ha bisogno di più contrasto del minimo. E non usare mai solo il colore per comunicare qualcosa, come un errore in un modulo: affiancalo a un testo o a un'icona.
Domande frequenti
Come si calcola il rapporto di contrasto?
Si confronta la luminanza relativa dei due colori con la formula WCAG: (la più chiara + 0,05) diviso (la più scura + 0,05). Il risultato va da 1 a 1 (stesso colore) a 21 a 1 (nero su bianco).
Quale livello devo rispettare?
Per la maggior parte dei siti, il livello AA: 4,5 a 1 per il testo normale e 3 a 1 per il testo grande. È quello richiesto dalle leggi e dalle norme sull'accessibilità di molti paesi.
Funziona con i colori trasparenti?
No. Usa il colore finale che vedi sullo schermo, con la trasparenza già applicata sullo sfondo. Puoi prenderlo con il contagocce del tuo browser o del tuo programma di grafica.
Salvate i colori che provo?
No. Il calcolo avviene nel tuo browser e non viene inviato nulla.
Risposte del team di AiDo Creative