Verificatore di contrasto dei colori

Il Verificatore di Contrasto dei Colori aiuta designer, sviluppatori e professionisti dell'accessibilità a garantire che le combinazioni di colori soddisfino gli standard di accessibilità WCAG 2.x. Un contrasto adeguato tra i colori del testo e dello sfondo è essenziale per la leggibilità, specialmente per gli utenti con ipovisione o deficit della visione a colori.

Cos'è il Rapporto di Contrasto dei Colori?

Il rapporto di contrasto dei colori misura la differenza nella luminanza (luminosità) percepita tra due colori. Va da 1:1 (colori identici, nessun contrasto) a 21:1 (contrasto massimo: nero su bianco). Il rapporto è calcolato utilizzando la formula WCAG 2.x basata sui valori di luminanza relativa di entrambi i colori.

Requisiti di Contrasto WCAG

Le Linee Guida per l'Accessibilità dei Contenuti Web (WCAG) definiscono due livelli di conformità per il contrasto dei colori:

Cosa conta come "testo grande"?

Le WCAG definiscono il testo grande come almeno 18 punti (24px) a peso normale, o almeno 14 punti (18,66px) in grassetto. Il testo grande ha requisiti di contrasto inferiori perché i caratteri più grandi sono naturalmente più facili da leggere.

Come Usare Questo Strumento

1. Inserisci i tuoi colori: Scegli i colori di primo piano (testo) e di sfondo usando i selettori di colore, digita i codici hex o clicca su un esempio preimpostato.
2. Controlla l'anteprima live: Guarda istantaneamente come appaiono i tuoi colori su elementi UI reali (titoli, corpo del testo, pulsanti, link, input dei moduli).
3. Clicca su "Controlla Contrasto": Ottieni il rapporto di contrasto esatto e lo stato di conformità WCAG per testo normale, testo grande e componenti UI.
4. Applica i suggerimenti: Se i tuoi colori falliscono, usa i suggerimenti automatici per trovare l'alternativa accessibile più vicina.

Comprendere i Risultati

Rapporto di Contrasto

Il numero principale (es. 8,59:1) indica quanto appaiono diversi i due colori. Un valore più alto è migliore per la leggibilità. Un rapporto di almeno 4,5:1 garantisce che la maggior parte degli utenti possa leggere comodamente il testo di dimensioni normali.

Voto Complessivo

• AAA (Eccellente): Supera tutti i criteri WCAG, inclusi quelli avanzati (7:1+). Migliore accessibilità possibile.
• AA (Buono): Supera i requisiti standard (4,5:1+). Soddisfa i requisiti legali nella maggior parte delle giurisdizioni.
• AA Grande (Parziale): Supera solo per testo grande o componenti UI (3:1+). Il testo normale fallisce.
• Fallito (Scarso): Non soddisfa alcun criterio di contrasto WCAG. Il testo sarà difficile da leggere per molti utenti.

Suggerimenti di Colore

Quando i tuoi colori non soddisfano i requisiti di contrasto, lo strumento suggerisce il colore accessibile più vicino regolando la luminosità e mantenendo tonalità e saturazione. Puoi applicare i suggerimenti con un solo clic.

Perché il Contrasto dei Colori è Importante

• Conformità legale: Molti paesi richiedono per legge la conformità WCAG AA (ADA, Sezione 508, EN 301 549, EAA).
• Esperienza utente: Un buon contrasto migliora la leggibilità per tutti gli utenti, non solo per quelli con disabilità.
• Impatto SEO: Le pagine accessibili tendono a essere più facili da usare, favorendo il coinvolgimento.
• Raggiungimento del pubblico: Circa 1 uomo su 12 e 1 donna su 200 presentano deficit della visione a colori.

Suggerimenti per Scegliere Colori Accessibili

• Inizia con un contrasto sufficiente, poi perfeziona il design — è più difficile correggere il contrasto a posteriori.
• Evita di posizionare testo colorato su sfondi colorati senza testare. Anche colori che "sembrano diversi" possono fallire i controlli di contrasto.
• Il testo grigio chiaro su sfondi bianchi è uno dei fallimenti di accessibilità più comuni.
• Usa questo strumento durante la progettazione, non solo durante l'audit — individuare i problemi in anticipo evita significativi lavori di rifacimento.
• Non affidarti solo al colore per trasmettere informazioni; usa anche forme, motivi o etichette.

Domande Frequenti

Cos'è il rapporto di contrasto dei colori?

Il rapporto di contrasto dei colori misura la differenza nella luminanza percepita tra due colori. Va da 1:1 (nessun contrasto, stesso colore) a 21:1 (contrasto massimo, nero su bianco). Il rapporto è calcolato utilizzando la formula WCAG 2.x: (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza relativa del colore più chiaro e L2 quella del colore più scuro.

Quale rapporto di contrasto è richiesto per la conformità WCAG AA?

Le WCAG AA richiedono un rapporto di contrasto minimo di 4,5:1 per il testo normale (sotto i 18pt o 14pt in grassetto) e 3:1 per il testo grande (18pt+ o 14pt+ in grassetto). Per i componenti UI non testuali e gli oggetti grafici, il minimo è 3:1.

Qual è la differenza tra WCAG AA e AAA?

WCAG AA è il livello di conformità standard che richiede 4,5:1 per il testo normale e 3:1 per il testo grande. WCAG AAA è il livello avanzato che richiede 7:1 per il testo normale e 4,5:1 per il testo grande. AA è richiesto dalla maggior parte delle leggi sull'accessibilità, mentre AAA è raccomandato ma non obbligatorio per interi siti web.

Cosa è considerato testo grande nelle linee guida WCAG?

Nelle linee guida WCAG, il testo grande è definito come testo che ha almeno 18 punti (24px) di peso normale, o almeno 14 punti (circa 18,66px) di peso grassetto. Il testo grande ha requisiti di contrasto inferiori perché i caratteri più grandi sono più facili da leggere.

Come posso correggere il contrasto di colore basso?

Per correggere il contrasto di colore basso: (1) Scurisci il colore del testo o schiarisci lo sfondo, o viceversa. (2) Usa la nostra funzione di suggerimento colore che trova automaticamente il colore conforme più vicino. (3) Aumenta la dimensione del font per qualificarlo come "testo grande" che ha requisiti più bassi. (4) Evita di usare solo il colore per comunicare informazioni.

Il contrasto di colore si applica solo al testo?

No. Il criterio di successo WCAG 2.1 1.4.11 richiede un rapporto di contrasto minimo di 3:1 per gli elementi non testuali, inclusi i bordi degli input, le icone e gli oggetti grafici essenziali per comprendere il contenuto. Questo si applica ai componenti UI come pulsanti, campi modulo e indicatori di focus.

Risorse Aggiuntive

• WCAG 2.1: Comprendere il Contrasto (Minimo)
• WCAG 2.1: Comprendere il Contrasto (Avanzato)