Contrasto Colori

Che cosa fa Contrasto Colori

Contrasto Colori misura la leggibilità tra un colore del testo e un colore di sfondo. Il risultato principale è un rapporto numerico, espresso nel formato 7.90:1, che indica quanto i due colori siano distinguibili. Un valore più alto significa in genere una lettura più stabile, soprattutto per testi piccoli, etichette, pulsanti, messaggi di errore e componenti dell’interfaccia che devono restare chiari anche su schermi diversi.

Un color contrast checker è utile quando una combinazione sembra gradevole ma non è ancora affidabile per la leggibilità. Due colori possono apparire equilibrati in un mockup e risultare difficili da leggere in condizioni reali: luminosità del monitor alta, modalità scura, testo sottile, sfondo saturo o trasparenze applicate al colore. Per questo Contrasto Colori mostra il rapporto, lo stato sintetico e controlli per testo normale, testo grande e controlli più rigorosi.

Il valore della verifica non è solo “passa” o “non passa”. Contrasto Colori aiuta anche a capire quale colore intervenire: testo, sfondo, luminosità o opacità. Se una coppia non raggiunge una soglia leggibile, puoi provare una regolazione graduale invece di sostituire subito l’intera palette. Questo è importante quando il colore fa parte di un brand, di un design system o di una gerarchia visiva già definita.

Come usare Contrasto Colori

1. Inserisci il colore del testo con il selettore colore o scrivi il valore HEX nel campo del testo. Il campo accetta il codice visualizzato accanto al simbolo #.
2. Inserisci il colore dello sfondo con il secondo selettore colore o con il campo HEX dedicato allo sfondo.
3. Leggi il rapporto di contrasto mostrato nell’area del risultato. Il numero viene aggiornato quando cambi uno dei due colori.
4. Controlla gli indicatori AA e AAA per capire se la coppia è adatta a testo normale, testo grande o testi più esigenti.
5. Usa i cursori di luminosità per rendere il testo più chiaro o più scuro senza cambiare la tonalità principale.
6. Usa i cursori di opacità solo quando la trasparenza fa davvero parte del design. Per testi piccoli, mantenere il testo opaco è spesso più sicuro.
7. Premi il pulsante di scambio colori per invertire testo e sfondo quando vuoi valutare la stessa coppia in direzione opposta.
8. Usa i pulsanti copia per riutilizzare rapidamente il colore del testo o dello sfondo nel tuo CSS, nel design system o nella documentazione.
9. Apri il controllo avanzato quando devi confrontare più colori nella stessa palette invece di verificare una sola coppia.

Come leggere il rapporto di contrasto

Le soglie di leggibilità rendono il controllo più oggettivo. Il testo normale richiede di solito più contrasto rispetto al testo grande, mentre i controlli più rigorosi sono utili quando vuoi maggiore sicurezza per letture prolungate, interfacce dense o contenuti importanti.

Un rapporto vicino alla soglia va interpretato con prudenza. Se il testo è sottile, piccolo o usato sopra un colore variabile, conviene cercare un margine più ampio. Se invece il testo è grande e molto marcato, il controllo AA grande può essere sufficiente, ma il risultato va comunque verificato nel contesto reale.

Quando controllare una coppia di colori

Il controllo è particolarmente utile prima di pubblicare una palette o approvare un componente UI. Verifica sempre testi su pulsanti, badge, banner, alert, placeholder, card, menu, elementi attivi, stati disabilitati e messaggi di errore. Questi elementi vengono spesso progettati con colori più vivaci rispetto al testo principale e possono perdere leggibilità se il colore di sfondo è troppo vicino al colore del contenuto.

Contrasto Colori è adatto anche alla revisione di modalità scura e modalità chiara. Una coppia che funziona bene su sfondo bianco può diventare troppo dura su sfondo nero, mentre un colore brillante può vibrare su un fondo saturo. Controllare entrambe le versioni evita correzioni tardive e rende più coerente la resa tra desktop, tablet e mobile.

Per progetti con molte varianti cromatiche, usa prima Contrasto Colori sulle coppie più importanti: testo primario, testo secondario, pulsante principale, pulsante di avviso e sfondo principale. Dopo questa verifica puntuale, puoi passare a Contrasto colori Pro per analizzare più colori insieme.

Regolazioni utili prima di cambiare palette

Quando una combinazione non supera la soglia richiesta, non è sempre necessario cambiare tonalità. A volte basta scurire leggermente il testo, schiarire lo sfondo o eliminare una trasparenza che riduce il contrasto effettivo. I cursori di luminosità aiutano proprio in questa fase: mantengono l’idea cromatica iniziale ma rendono la coppia più leggibile.

La regolazione dell’opacità richiede più attenzione. Un testo con opacità ridotta può sembrare elegante in un mockup statico, ma diventa fragile su schermi con bassa qualità, su sfondi colorati o quando l’utente aumenta la luminosità. Se il testo comunica un’azione, un errore o un’informazione essenziale, è meglio partire da un colore pieno e poi correggere la luminosità.

Se devi scegliere un nuovo colore da zero, un selettore dedicato come Selettore Colori può aiutarti a individuare un HEX più adatto prima di tornare alla verifica del contrasto.

Esempi pratici di decisione

Un pulsante primario con testo bianco non deve essere valutato solo rispetto al colore normale. Controlla anche lo stato hover, lo stato attivo e l’eventuale versione disabilitata, perché spesso usano sfondi più chiari o più trasparenti. Se il rapporto scende sotto la soglia, mantieni il colore principale per il bordo o per l’accento e scegli una variante più scura per il testo su sfondo pieno.

Per una card informativa, verifica almeno tre coppie: titolo su sfondo, testo secondario su sfondo e link o pulsante interno. Il testo secondario è spesso il punto più debole, perché viene progettato con un grigio chiaro. Se quel grigio non supera AA normale, scurirlo leggermente migliora la leggibilità senza cambiare l’identità visiva della card.

Per messaggi di errore, avviso o successo, il colore non deve essere l’unico segnale. Dopo aver verificato il contrasto, aggiungi testo chiaro, icone o struttura visiva sufficiente. In questo modo l’informazione rimane comprensibile anche per chi non distingue bene alcune tonalità o per chi usa lo schermo in condizioni di luce difficili.

Problemi comuni da evitare

• Valutare il contrasto solo guardando il colore a occhio, senza controllare il rapporto numerico.
• Controllare solo il testo principale e dimenticare link, pulsanti, stati hover, messaggi di errore e label dei form.
• Usare lo stesso colore per testo e icone senza verificare che entrambi restino leggibili sullo sfondo scelto.
• Abbassare l’opacità del testo per ottenere un effetto più delicato, perdendo però il rapporto necessario.
• Considerare una coppia valida per sempre anche quando cambia il contesto: dimensione del testo, peso del font, sfondo, immagine o tema.

Verifica finale prima di usare i colori

Una coppia cromatica è pronta quando il rapporto risponde all’uso reale del testo. Per testo normale, cerca almeno AA normale; per interfacce importanti, moduli o letture lunghe, punta a un margine più alto. Se il risultato è solo parziale, limita la coppia a titoli grandi o modifica uno dei due colori prima di usarla su contenuti piccoli.

Il controllo finale dovrebbe includere almeno tre verifiche: il rapporto numerico, il livello di leggibilità mostrato e la resa visiva nel componente reale. Quando questi tre elementi sono coerenti, la scelta del colore è più difendibile e più facile da riutilizzare nel progetto.

Ripeti il controllo quando cambi font, peso o dimensione del testo. Un rapporto sufficiente con un titolo grande può non bastare per note, helper text o microcopy, soprattutto se il carattere è sottile.