Design

Scegliere colori che tutti possano leggere

Di Il team di AsasWeb 2 min di lettura

Le WCAG richiedono un rapporto di contrasto di almeno 4,5:1 per il testo normale e di 3:1 per il testo grande e gli elementi di interfaccia. Il modo affidabile per raggiungere questi target è integrarli nella palette fin dall'inizio, scegliere un inchiostro scuro e una superficie chiara che passino con margine, poi verificare ogni coppia di colori con uno strumento di contrasto. Non segnalare mai nulla solo con il colore e controlla la dark mode separatamente, perché una palette che passa su bianco può fallire sul quasi nero.

Il testo a basso contrasto sembra elegante in uno strumento di design e scompare nella vita reale: sotto il sole, su uno schermo economico o per chiunque abbia una vista ridotta. Il colore accessibile non significa spegnere il tuo brand. Significa assicurarsi che le persone possano davvero leggerlo.

Conosci i target

Le WCAG fissano minimi chiari. Il testo del corpo ha bisogno di un rapporto di contrasto di almeno 4,5 a 1 rispetto al suo sfondo. Il testo grande, da circa 24 pixel, e gli elementi dell’interfaccia hanno bisogno di almeno 3 a 1. Sono soglie, non obiettivi, e sono facili da verificare con qualsiasi strumento di contrasto.

Integra il contrasto nella tua palette

Il trucco è progettare la palette attorno a questi target fin dall’inizio, invece di scoprire i fallimenti alla fine. Scegli un inchiostro scuro e una superficie chiara che passino comodamente, poi scegli colori d’accento che funzionino sia come testo sia come riempimenti. Su questo sito, ogni coppia di colori è documentata con il suo rapporto misurato, così nulla sfugge.

Non affidarti solo al colore

Il colore non dovrebbe mai essere l’unico modo in cui segnali qualcosa. Un campo obbligatorio, un errore, un link in un paragrafo: ciascuno ha bisogno di un secondo segnale come testo, un’icona o una sottolineatura. Chi non percepisce le differenze di colore ha comunque bisogno del messaggio.

Attenzione alla modalità scura

Una palette che passa in modalità chiara può fallire in modalità scura, dove un colore del brand che sembrava perfetto sul bianco può risultare troppo debole su una superficie quasi nera. Ogni tema ha bisogno dei propri valori verificati.

Trattiamo il contrasto come un numero misurato, non come un’ipotesi. Se non sei sicuro che i colori del tuo brand passino, avvia un progetto e li verificheremo, trovando una palette che sia al tempo stesso in linea con il brand e leggibile.

Vuoi questo standard sul tuo sito?

Raccontaci il tuo progetto e risponderemo con passi successivi onesti e pratici.