Controllo contrasto colori
Verifica il rapporto di contrasto tra due colori rispetto ai livelli di accessibilità WCAG AA e AAA.
Strumenti correlati
Come usare Controllo contrasto
- 01
Scegli un colore per il testo e uno per lo sfondo.
- 02
Leggi il rapporto di contrasto e i badge di superamento/non superamento WCAG.
- 03
Regola i colori finché non superano il livello di cui hai bisogno.
Cosa fa il verificatore di contrasto
Questo è un verificatore di contrasto colore WCAG che mostra il rapporto di contrasto esatto tra il colore del testo e il colore dello sfondo, e se rispetta i livelli di accessibilità AA e AAA. Scegli i colori con il campione o tramite codice hex e osserva un'anteprima in tempo reale.
Regola i due colori finché i badge non superano il livello che ti serve: il risultato si aggiorna all'istante mentre procedi.
Perché il contrasto conta
Un testo troppo simile per luminosità al suo sfondo è difficile o impossibile da leggere, soprattutto per chi ha una vista ridotta o deficit nella percezione dei colori, o per chiunque usi il telefono sotto il sole. Un contrasto sufficiente mantiene i tuoi contenuti leggibili per tutti.
Le soglie WCAG AA e AAA
Le Linee guida per l'accessibilità dei contenuti web (WCAG) fissano lo standard. Il livello AA, quello a cui punta la maggior parte dei siti e a cui si riferiscono molte leggi sull'accessibilità, richiede un rapporto di 4,5:1 per il testo normale e 3:1 per il testo grande. Il livello AAA è più severo, con 7:1 e 4,5:1.
Il testo grande ha una soglia più bassa perché le lettere più grandi restano leggibili con meno contrasto. Si considera grande a circa 24px (18pt), o 18,66px (14pt) se in grassetto.
Come si calcola il rapporto
Il rapporto deriva dalla luminanza relativa dei due colori tramite la formula ufficiale WCAG, e produce un valore da 1:1 (nessun contrasto, colori identici) fino a 21:1 (nero su bianco).
Funziona nel tuo browser
Tutto viene calcolato nel tuo browser, quindi è istantaneo e privato. Nulla di ciò che scegli viene caricato da qualche parte.
Domande frequenti
Di quale rapporto di contrasto ho bisogno?
WCAG AA richiede 4.5:1 per il testo normale e 3:1 per il testo grande (18pt o 14pt in grassetto). AAA richiede rispettivamente 7:1 e 4.5:1.
Cosa conta come testo grande?
Testo di almeno 24px (18pt), oppure 18.66px (14pt) quando è in grassetto. Al testo grande è consentito un rapporto di contrasto inferiore.
Come viene calcolato il rapporto?
Dalla luminanza relativa di ogni colore usando la formula ufficiale WCAG, dando un valore da 1:1 (nessun contrasto) a 21:1 (nero su bianco).
Perché il contrasto conta?
Un contrasto sufficiente mantiene il testo leggibile per le persone con ipovisione o deficit della visione dei colori, e per tutti in condizioni di scarsa illuminazione. È una parte fondamentale di un sito accessibile e usabile.
Cos'è WCAG?
Le Web Content Accessibility Guidelines, lo standard internazionale per rendere accessibili i contenuti web. Il suo livello AA è ampiamente referenziato da leggi e politiche sull'accessibilità.