Verificatore di contrasto – Rapporto di contrasto WCAG

Verificare il contrasto dei colori per l'accessibilità

Il contrasto dei colori è fondamentale per la leggibilità. Quando il testo in primo piano non ha un contrasto sufficiente con lo sfondo, diventa difficile da leggere — in particolare per le persone ipovedenti o con deficit della visione dei colori.

Questo verificatore di contrasto calcola il rapporto di contrasto tra due colori qualsiasi e lo valuta secondo i criteri di successo WCAG 2.1. Inserisci i colori in formato HEX, RGB o HSL e ottieni risultati istantanei.

Comprendere i livelli di contrasto WCAG

Le Linee guida per l'accessibilità dei contenuti Web (WCAG) definiscono rapporti di contrasto minimi per la leggibilità del testo. Esistono due livelli di conformità:

• WCAG AA Testo normale — richiede un rapporto di contrasto di almeno 4,5:1
• WCAG AA Testo grande — richiede un rapporto di contrasto di almeno 3:1 (il testo grande è 18pt+ o 14pt+ in grassetto)
• WCAG AAA Testo normale — richiede un rapporto di contrasto di almeno 7:1
• WCAG AAA Testo grande — richiede un rapporto di contrasto di almeno 4,5:1

AA è il livello standard a cui mirano la maggior parte dei siti web e delle applicazioni. AAA è il livello avanzato, consigliato quando la massima leggibilità è importante.

Come usare il verificatore di contrasto

1. Inserisci un colore di primo piano (testo) — HEX, RGB o HSL
2. Inserisci un colore di sfondo in qualsiasi formato supportato
3. Visualizza il rapporto di contrasto e un'anteprima dal vivo del testo sullo sfondo
4. Controlla i risultati superato/non superato per i livelli WCAG AA e AAA
5. Usa il pulsante di scambio per invertire rapidamente i colori di primo piano e sfondo

Quando verificare il contrasto dei colori

• Nella scelta dei colori di testo e sfondo per un sito web o un'applicazione
• Per verificare che un design system rispetti i requisiti di accessibilità
• Nel testare i colori di pulsanti, link o icone rispetto ai loro sfondi
• Nel controllare le combinazioni di colori in modalità scura
• Per soddisfare gli standard legali di accessibilità (ADA, EAA, Section 508)

Preciso, istantaneo e gratuito

Questo strumento calcola il rapporto di contrasto WCAG 2.1 utilizzando la formula standard della luminanza relativa. I risultati vengono calcolati istantaneamente nel tuo browser — nessun dato viene inviato ad alcun server.

Hai bisogno di trovare o convertire un colore prima? Usa il Selettore colori per estrarre i colori da un'immagine, o il Convertitore colori per passare tra HEX, RGB e HSL.

Domande frequenti

Qual è un buon rapporto di contrasto per il testo?

Per il testo di dimensioni normali, è richiesto un rapporto di contrasto di almeno 4,5:1 per soddisfare WCAG AA. Per il testo grande (18pt o 14pt in grassetto e superiore), il minimo è 3:1. Per il livello di accessibilità più elevato (WCAG AAA), il testo normale necessita di almeno 7:1.

Qual è la differenza tra WCAG AA e AAA?

AA è il livello di conformità standard che la maggior parte dei siti web e delle applicazioni dovrebbe soddisfare. AAA è il livello avanzato con requisiti di contrasto più rigorosi, consigliato per i contenuti in cui la massima leggibilità è fondamentale, come i siti governativi o sanitari.

Cosa si intende per testo grande nelle WCAG?

Il testo grande è definito come testo di 18 punti (24px) o superiore con peso normale, o di 14 punti (circa 18,66px) o superiore in grassetto. Il testo grande ha requisiti di contrasto più bassi perché le sue dimensioni lo rendono intrinsecamente più facile da leggere.

Quali formati di colore supporta questo verificatore?

È possibile inserire colori in HEX (es. #1E293B), RGB (es. rgb(30, 41, 59)) o HSL (es. hsl(222, 33%, 17%)). Lo strumento rileva automaticamente il formato.

Come viene calcolato il rapporto di contrasto?

Il rapporto di contrasto viene calcolato secondo la formula WCAG 2.1: (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza relativa del colore più chiaro e L2 quella del colore più scuro. Il risultato va da 1:1 (nessun contrasto) a 21:1 (contrasto massimo, nero su bianco).

Questo strumento funziona su dispositivi mobili?

Sì. Il verificatore di contrasto funziona su qualsiasi dispositivo con un browser moderno — desktop, tablet o telefono.

Questo strumento è gratuito?

Sì. ColourPicker.app è completamente gratuito, senza necessità di registrazione.

Posso verificare il contrasto per componenti dell'interfaccia, non solo per il testo?

WCAG 2.1 richiede anche un rapporto di contrasto minimo di 3:1 per i componenti dell'interfaccia significativi e gli oggetti grafici (Criterio di successo 1.4.11). Puoi usare questo verificatore per controllare anche quelle combinazioni — il calcolo del rapporto è identico.