Verificatore di contrasto colori

Informazioni sul verificatore di contrasto dei colori

Questo verificatore di contrasto dei colori gratuito misura il rapporto di contrasto tra un colore di testo e un colore di sfondo, e ti dice se soddisfa i livelli WCAG AA e AAA per il testo normale e per il testo grande.

Funziona nel tuo browser: non viene caricato nulla.

Che cosa significa il rapporto

Il rapporto di contrasto confronta la luminanza relativa di due colori — quanta luce ciascuno emette o riflette — su una scala che va da 1:1 a 21:1.

• 1:1: colori identici, il testo è invisibile
• 21:1: nero puro su bianco puro, il massimo possibile
• 4.5:1: il minimo per il testo corrente secondo WCAG AA

Il dettaglio importante è che il calcolo si basa sulla luminanza, non su quanto diversi appaiano i colori. Due colori possono sembrare molto diversi e non passare comunque. Rosso su verde è l'esempio classico: visivamente d'effetto, con luminanza quasi identica e quasi illeggibile per molte persone.

È anche il motivo per cui non puoi giudicare il contrasto a occhio. Chi progetta lavora su buoni monitor, con luce controllata e occhi giovani, e il grigio chiaro che sembra elegante in studio sparisce su un telefono sotto il sole.

Le soglie

Le WCAG fissano due livelli, e il requisito dipende dalla dimensione del testo.

Livello AA: l'obiettivo consueto, quello a cui fanno riferimento la maggior parte delle leggi sull'accessibilità:

• 4.5:1 per il testo normale
• 3:1 per il testo grande
• 3:1 per i componenti dell'interfaccia e per la grafica che porta significato

Livello AAA: uno standard più severo, adatto ai contenuti destinati a lettori ipovedenti:

• 7:1 per il testo normale
• 4.5:1 per il testo grande

Testo grande significa 18pt (24px) o superiore, oppure 14pt (18.66px) in grassetto o superiore. Le lettere più grandi hanno tratti più spessi, quindi reggono un contrasto minore.

AA è l'obiettivo realistico per la maggior parte dei siti. AAA è difficile da raggiungere su un intero progetto e non è richiesto per i contenuti di carattere generale.

Perché riguarda molte più persone di quanto pensi

È facile archiviare il contrasto sotto la voce «caso limite». I numeri dicono altro.

Circa 1 uomo su 12 e 1 donna su 200 hanno una qualche forma di deficit della visione dei colori: all'incirca 300 milioni di persone nel mondo. Il rosso-verde è di gran lunga il più comune.

Quasi tutti dopo i 40 anni vedono calare la propria sensibilità al contrasto, e il cristallino ingiallisce con l'età, modificando il modo in cui si percepiscono i blu.

Tutti, a volte. I problemi di contrasto colpiscono anche persone con vista perfetta che leggono all'aperto, su uno schermo attenuato, su un monitor economico, o attraverso lo schermo sporco di un telefono sull'autobus. Qui i miglioramenti di accessibilità sono semplicemente miglioramenti di leggibilità per tutti.

C'è anche una dimensione legale. Il livello WCAG 2.1 AA è richiamato di fatto dall'Americans with Disabilities Act, dalla Section 508 negli appalti federali statunitensi, dall'European Accessibility Act e da norme equivalenti nel Regno Unito, in Canada e in Australia. Il contrasto è tra le mancanze più spesso citate nei reclami sull'accessibilità, in gran parte perché è facilissimo da misurare.

Dove i progetti falliscono di solito

• Testo segnaposto grigio chiaro nei campi dei moduli: diffusissimo e quasi sempre insufficiente
• Testo bianco su una fotografia: il rapporto cambia da punto a punto dell'immagine; aggiungi un livello o un velo scuro
• Colori del marchio usati come testo: un blu o un arancione aziendale di tono medio su bianco finisce spesso intorno a 3:1
• Stati disabilitati: esenti dal requisito, ma è comunque opportuno mantenerli leggibili
• Collegamenti distinti solo dal colore: se un link ha la stessa chiarezza del testo che lo circonda, sottolinealo
• Testo bianco su giallo, o grigio su grigio: i colpevoli di sempre
• Modalità scura: bianco puro su nero puro è tecnicamente 21:1 ma provoca alonatura; colori leggermente attenuati si leggono meglio
• Messaggi di errore in rosso su sfondo bianco: spesso sotto 4.5:1 proprio per il messaggio che conta di più

Correggere una coppia che non passa

Quando una combinazione non passa, modifica la luminosità anziché la tonalità. Di solito puoi mantenere riconoscibile un colore del marchio scurendolo o schiarendolo quanto basta per superare la soglia.

Approcci pratici:

Riserva il colore del marchio agli elementi grandi — titoli, pulsanti, icone — dove la soglia è 3:1, e usa una variante più scura per il testo corrente.

Modifica un solo lato. Scurire il testo è in genere meno invasivo che cambiare lo sfondo.

Sulle immagini aggiungi un velo: uno strato scuro semitrasparente tra foto e testo. Garantisce il rapporto indipendentemente da ciò che mostra l'immagine.

Non affidarti al solo colore per trasmettere un significato. Aggiungi un'icona, un'etichetta o una sottolineatura, così l'informazione sopravvive anche per chi non riesce affatto a distinguere i colori.

Come si usa

• Scegli un colore di testo e un colore di sfondo
• Osserva il rapporto di contrasto e i contrassegni di superamento o mancato superamento AA / AAA
• Leggi l'anteprima dal vivo per giudicare di persona, poi regola i colori

Buono a sapersi

• Prova i colori reali, opacità compresa. Un testo al 70% di opacità è di fatto un colore diverso rispetto al suo sfondo.
• Verifica entrambi i temi. Una palette che passa in modalità chiara può non passare in modalità scura.
• I loghi sono esenti dal requisito di contrasto, così come il testo incidentale e decorativo.
• I caratteri sottili richiedono nella pratica più contrasto di quanto suggerisca il rapporto. Lo standard non misura lo spessore del tratto, ma i tuoi lettori lo percepiscono.
• Se puoi, verifica su un telefono alla luce del giorno. È una prova più onesta di qualsiasi monitor.
• Passare è un pavimento, non un traguardo. 4.5:1 è il minimo accettabile, non l'obiettivo.

Domande frequenti

Qual è un buon rapporto di contrasto?

Per il testo corrente, almeno 4.5:1 per soddisfare WCAG AA, il livello a cui si riferisce la maggior parte delle leggi sull'accessibilità. Il testo grande, cioè 18pt/24px oppure 14pt/18.66px in grassetto e oltre, richiede 3:1. Il livello AAA, più severo, chiede 7:1 sul testo normale. Considera questi valori come minimi e non come obiettivi; una lettura confortevole si colloca di solito ben al di sopra.

Qual è la differenza tra WCAG AA e AAA?

AA è lo standard pratico adottato dalla maggior parte delle normative e delle organizzazioni, e richiede 4.5:1 per il testo normale e 3:1 per il testo grande. AAA è più severo, con 7:1 e 4.5:1, ed è pensato per contenuti rivolti specificamente a lettori ipovedenti. AAA è difficile da ottenere su un intero progetto e non è richiesto per i siti di uso generale.

Perché la mia combinazione di colori non passa anche se a me sembra a posto?

Perché il contrasto si calcola dalla luminanza, non da quanto diversi appaiono due colori. Rosso e verde sembrano nettamente diversi ma hanno luminanza simile, ed è per questo che quell'abbinamento non passa. Anche il giudizio personale è inaffidabile: chi progetta lavora di solito su buoni schermi, con illuminazione controllata e vista buona, condizioni che la maggior parte dei lettori non ha.

Il contrasto conta anche per immagini e icone?

Sì. Le WCAG richiedono 3:1 per i componenti dell'interfaccia e per la grafica che porta significato, come le icone che indicano uno stato o il bordo di un campo di un modulo. Le immagini puramente decorative e i loghi sono esenti. Il testo posto su una fotografia è il problema tipico, dato che il rapporto cambia da punto a punto dell'immagine: un livello semitrasparente lo risolve.

Come correggo una coppia di colori che non passa senza perdere il colore del marchio?

Regola la luminosità anziché la tonalità. Una versione più scura o più chiara dello stesso colore resta di solito riconoscibile come colore del marchio e supera comunque la soglia. Puoi anche conservare l'originale per titoli, pulsanti e icone, dove è richiesto solo 3:1, e usare una variante più scura per il testo corrente, dove vale il 4.5:1.

Il nero puro su bianco puro è la scelta migliore?

È il massimo, a 21:1, ma non necessariamente il più confortevole. Un contrasto molto elevato può provocare alonatura — un effetto di bagliore attorno alle lettere — soprattutto in modalità scura e per alcuni lettori con dislessia o astigmatismo. Un grigio molto scuro su un bianco sporco, o un bianco attenuato su un grigio scuro, si legge spesso più comodamente e passa comunque con ampio margine.

Le mie scelte di colore vengono inviate da qualche parte?

No. Il rapporto viene calcolato nel tuo browser mentre scegli i colori, quindi nulla viene trasmesso o conservato e lo strumento funziona anche offline.

Strumenti correlati

• Selettore di colori: trova e converti i colori tra HEX, RGB e HSL
• Selettore di colore da immagine: estrai un colore da un'immagine
• Palette di colori da immagine: costruisci una palette e poi provala qui
• Generatore di gradienti CSS: verifica il contrasto del testo a entrambe le estremità di un gradiente