Verificatore di contrasto colori

Un contrasto insufficiente tra il testo e lo sfondo rende il contenuto difficile da leggere, in particolare per le persone ipovedenti, gli utenti anziani o chi consulta il tuo sito su uno schermo al sole. Le linee guida WCAG 2.1 definiscono soglie minime di contrasto per garantire l'accessibilità.

Questo strumento calcola il rapporto di contrasto tra due colori, valuta la conformità WCAG (AA e AAA) per il testo normale, il testo grande e le icone, e propone una funzione di adattamento automatico per trovare colori conformi.

Lo strumento mostra il rapporto di contrasto su una scala da 1:1 (nessun contrasto) a 21:1 (contrasto massimo - nero su bianco). Il risultato viene confrontato con le soglie definite nello standard WCAG:

• Testo normale - richiede almeno 4,5:1 per il livello AA (standard minimo) o 7:1 per il livello AAA (standard avanzato). Si applica al testo inferiore a 18pt (24px) o inferiore a 14pt (18,5px) in grassetto.
• Testo grande / grassetto - richiede almeno 3:1 per il livello AA o 4,5:1 per il livello AAA. Si applica al testo a partire da 18pt (24px) o da 14pt (18,5px) in grassetto: titoli, pulsanti, evidenziazioni.
• Icone ed elementi di interfaccia - richiedono almeno 3:1 per il livello AA. Si applica a icone, pulsanti, campi modulo e altri elementi di interfaccia che trasmettono informazioni.

Il livello AA e il minimo richiesto dalle normative di accessibilità digitale in molti paesi, inclusa la direttiva europea sull'accessibilità dei siti web. Il livello AAA offre una leggibilità migliore, ma non è sempre realizzabile per tutti gli elementi.

Se il contrasto è troppo basso, la funzione Adatta trova automaticamente una variante di colore del testo conforme alla soglia di contrasto selezionata.

Come funziona l'adattamento:

1. Seleziona l'obiettivo di adattamento dalla lista, ad es. AA per testo normale o AAA per testo grande.
2. Clicca sul pulsante Adatta.
3. Lo strumento cerca tra le varianti di luminosità del colore del testo e suggerisce quella più vicina conforme ai requisiti.
4. Il colore suggerito può essere copiato negli appunti o impostato immediatamente come nuovo colore del testo.

L'algoritmo preserva la tonalità e la saturazione del colore originale, modificando solo la luminosità. Il colore suggerito resta coerente con l'identità visiva rispettando lo standard di accessibilità.

Messaggio di errore formato colore

Verifica il formato del colore. Un codice HEX deve iniziare con # e contenere 3 o 6 caratteri (ad es. #fff o #ffffff). Per il formato RGB, verifica che i valori siano separati da virgole e compresi tra 0 e 255.

La funzione Adatta non trova un colore appropriato

Quando lo sfondo e il testo hanno una luminosità simile nella stessa tonalità, l'algoritmo potrebbe non trovare una variante conforme ai requisiti senza cambiare la tonalità. In questo caso, prova a modificare il colore dello sfondo o a scegliere un colore del testo completamente diverso.

Il colore nel selettore non corrisponde al codice inserito

Il selettore di colori del browser supporta solo il formato HEX senza trasparenza. Se inserisci un colore in formato RGBA o HSLA con trasparenza, il selettore mostrera solo la parte colorata (senza alfa). I calcoli del contrasto continuano a considerare la trasparenza.

Il daltonismo è un disturbo della percezione dei colori che colpisce circa l'8% degli uomini e lo 0,5% delle donne. Le persone daltoniche possono avere difficolta a distinguere alcune coppie di colori, anche se il contrasto di luminosità è sufficiente.

Tipi più comuni di daltonismo:

• Deuteranopia - difficolta a distinguere il verde dal rosso (forma più comune)
• Protanopia - difficolta a percepire il rosso
• Tritanopia - difficolta a percepire il blu e il giallo (raro)

Questo strumento verifica il contrasto di luminosità, che è importante per tutti gli utenti. Tuttavia, durante la progettazione, e bene evitare combinazioni di colori problematiche (ad es. testo rosso su sfondo verde) e non affidarsi esclusivamente al colore per trasmettere informazioni: usa anche forme, icone e testo.