«Se mettiamo i contrasti a norma, il sito diventa brutto.» È l’obiezione che arriva sempre, di solito dal direttore creativo, e va presa sul serio: perché nasce da una preoccupazione legittima. La buona notizia è che è quasi sempre falsa: nella pratica si sistema tutto senza toccare l’identità, se si sa dove intervenire.

Cosa chiedono le regole

Le WCAG fissano un rapporto minimo tra il colore del testo e quello dello sfondo:

• 4,5:1 per il testo normale;
• 3:1 per il testo grande (dai 24px, o dai 18,5px se in grassetto);
• 3:1 per gli elementi di interfaccia: bordi dei campi, icone informative, stati di focus.

Il livello AAA chiede 7:1, ma per la conformità normativa il riferimento è AA. E attenzione al terzo punto, quello che quasi tutti dimenticano: anche i bordi dei campi form e l’indicatore di focus devono essere visibili.

Dove cascano quasi tutti i brand

Non nel testo principale, che di solito è nero su bianco e passa. I punti critici sono altri, e sono sempre gli stessi:

• Il grigio chiaro elegante usato per didascalie, note legali, testi secondari. Bellissimo, illeggibile.
• Il colore del brand su bianco: moltissimi arancioni, gialli e verdi lime falliscono il test.
• I bottoni con testo bianco su un colore chiaro del brand.
• Il testo sopra le foto, che cambia contrasto a ogni immagine.
• I placeholder dei campi form usati al posto delle etichette: doppio errore: contrasto e usabilità.

Il metodo che funziona: non cambiare il brand, estenderlo

Non serve cambiare il colore aziendale. Serve ampliare la palette con varianti dello stesso colore pensate per usi diversi. In pratica:

Tieni il colore del brand per le grandi superfici, i fondi e gli elementi decorativi, dove il contrasto non è richiesto. Poi definisci una variante più scura dello stesso colore da usare quando quel colore deve fare da testo o da bordo. Percettivamente resta «il vostro colore», tecnicamente passa il test.

Per i bottoni, la scorciatoia più efficace è invertire: testo scuro su fondo chiaro del brand, invece di bianco su chiaro.

Per il testo sulle immagini, un velo scuro uniforme sopra la foto risolve una volta per tutte, invece di sperare che ogni scatto funzioni.

Gli strumenti

In fase di progettazione bastano i plugin di controllo contrasto direttamente nel file di design: correggere lì costa minuti, correggere in produzione costa giornate. Sul sito già online, WAVE o axe DevTools segnalano tutte le coppie fuori norma in una scansione.

Il caso limite: il logo

Buona notizia: i loghi sono esclusi dai requisiti di contrasto. Cattiva notizia: tutto il resto no, e nessuno ti salva se l’intera palette nasce dal logo senza mai essere stata verificata.

Il vantaggio collaterale

Contrasti corretti significano un sito leggibile al sole, sullo schermo del telefono, da una persona di sessant’anni e da chiunque abbia una lieve difficoltà visiva: cioè da una fetta enorme del tuo pubblico. Non è solo conformità: è leggibilità per tutti.

Vuoi che verifichiamo la vostra palette? Scrivici.