Verifica contrasto WCAG
Verificare i rapporti di contrasto dei colori per la conformità ai requisiti di accessibilità WCAG AA e AAA
Input e opzioni
Preimpostazioni ed esempi rapidi
Funziona nel browser. I dati inseriti restano su questo dispositivo.
Risultati
Inserisca i valori per vedere il risultato.
Informazioni sulla Verifica contrasto WCAG
La nostra verifica contrasto WCAG online gratuita aiuta designer, sviluppatori e professionisti dell'accessibilità a controllare che le combinazioni di colore di testo e sfondo rispettino i requisiti di contrasto delle Web Content Accessibility Guidelines (WCAG) 2.1. Un contrasto cromatico accessibile garantisce che tutti gli utenti, comprese le persone con ridotta capacità visiva o con deficit della visione dei colori, possano leggere i contenuti web e interagire con essi.
Lo strumento calcola il rapporto di contrasto tra due colori qualsiasi con la formula ufficiale della luminanza relativa del W3C e indica subito se la combinazione supera o non supera i livelli di conformità WCAG AA e WCAG AAA, sia per il testo normale sia per il testo grande. Tutti i calcoli vengono eseguiti in tempo reale direttamente nel browser, senza inviare dati a nessun server.
Che stia conducendo un audit di accessibilità, progettando una nuova interfaccia o verificando la conformità di contenuti esistenti, questa verifica del contrasto Le offre risultati precisi e conformi agli standard, insieme ad anteprime del testo in tempo reale e suggerimenti concreti per correggere le combinazioni di colore che non superano il controllo.
Capire i requisiti di contrasto WCAG
Le Web Content Accessibility Guidelines (WCAG) sono lo standard riconosciuto a livello internazionale per l'accessibilità del web, pubblicato dal World Wide Web Consortium (W3C). Le WCAG definiscono soglie precise del rapporto di contrasto per garantire la leggibilità del testo a utenti con capacità visive diverse.
- WCAG livello AA (testo normale): È richiesto un rapporto di contrasto minimo di 4,5:1. Vale per il testo del corpo, i paragrafi e qualsiasi testo inferiore a 18pt (24px) o a 14pt in grassetto (18,66px in grassetto).
- WCAG livello AA (testo grande): È richiesto un rapporto di contrasto minimo di 3:1. Si considera testo grande quello di almeno 18pt (24px) o di 14pt in grassetto (18,66px in grassetto).
- WCAG livello AAA (testo normale): È richiesto un rapporto di contrasto minimo di 7:1. È il livello più alto di conformità all'accessibilità per il testo di dimensioni normali.
- WCAG livello AAA (testo grande): Per il testo grande è richiesto un rapporto di contrasto minimo di 4,5:1 al livello di conformità AAA.
Rispettare almeno il livello WCAG AA è considerato lo standard di base per una progettazione web accessibile ed è richiesto da molti quadri normativi nel mondo, tra cui l'Americans with Disabilities Act (ADA), l'European Accessibility Act e la Section 508 del Rehabilitation Act. Il livello WCAG AAA offre un grado di accessibilità superiore, raccomandato dove è possibile.
Come si calcola il rapporto di contrasto
Il rapporto di contrasto tra due colori si determina a partire dalla luminanza relativa di ciascun colore, come definita nella specifica WCAG 2.1. La luminanza relativa misura la luminosità percepita di un colore su una scala da 0 (nero più scuro) a 1 (bianco più chiaro).
Il calcolo prevede tre passaggi. Prima, ogni canale di colore (rosso, verde, blu) viene convertito dal valore sRGB a 8 bit (0-255) a un valore sRGB normalizzato (0-1) dividendo per 255. Poi, ogni valore normalizzato subisce una correzione gamma: se il valore è pari o inferiore a 0,04045 viene diviso per 12,92; altrimenti viene trasformato con la formula ((value + 0.055) / 1.055) ^ 2.4. Infine, i valori dei canali linearizzati vengono combinati con coefficienti ponderati: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.
Il rapporto di contrasto finale si calcola come (L1 + 0.05) / (L2 + 0.05), dove L1 è la luminanza relativa del colore più chiaro e L2 è la luminanza relativa del colore più scuro. Il risultato è un valore compreso tra 1:1 (nessun contrasto, colori identici) e 21:1 (contrasto massimo, nero puro su bianco puro).
Funzioni principali
- Calcolo del rapporto di contrasto in tempo reale con la formula ufficiale di luminanza W3C WCAG 2.1
- Indicatori di superato o non superato per i livelli di conformità WCAG AA e AAA, sia per il testo normale sia per il testo grande
- Selettore di colore interattivo e campo per il codice esadecimale, sia per il colore del testo sia per quello dello sfondo
- Scambio dei colori con un clic per provare le combinazioni invertite
- Dieci combinazioni di colori predefinite, comprese le associazioni accessibili più comuni
- Anteprima del testo in tempo reale che mostra l'aspetto dei colori con testo normale e grande
- Suggerimento automatico del colore del testo conforme più vicino quando la combinazione attuale non supera il controllo
- Dettagli tecnici sulla luminanza del colore del testo e di quello dello sfondo
- Supporto completo della modalità scura per un uso comodo in ogni ambiente
- Tutta l'elaborazione avviene in locale nel browser, senza trasmettere dati a server esterni
Come usare la Verifica contrasto WCAG
- Imposti il colore del testo: Faccia clic sul quadrato del selettore di colore oppure digiti un valore esadecimale (ad es. #1A1A2E) nel campo di testo per impostare il colore del testo in primo piano.
- Imposti il colore dello sfondo: Allo stesso modo, usi il selettore di colore o il campo esadecimale per impostare il colore dello sfondo dietro il testo.
- Esamini i risultati: Il rapporto di contrasto e l'esito (superato o non superato) per tutti e quattro i livelli WCAG vengono mostrati subito mentre cambia i colori.
- Controlli l'anteprima: Scorra verso il basso per vedere il testo reale con la combinazione di colori scelta, sia in dimensioni normali sia grandi.
- Applichi i suggerimenti: Se la combinazione non supera il livello WCAG AA, viene mostrato un colore del testo suggerito. Faccia clic su Applica per usarlo.
- Provi i preset: Usi i preset rapidi per testare combinazioni di colori note, accessibili o non accessibili.
- Scambi i colori: Faccia clic sul pulsante Scambia colori per invertire le selezioni del colore del testo e dello sfondo.
Perché il contrasto cromatico è importante per l'accessibilità
In tutto il mondo circa 1 uomo su 12 e 1 donna su 200 presentano una forma di deficit della visione dei colori. Inoltre, milioni di persone hanno una ridotta capacità visiva, alterazioni della vista dovute all'età o difficoltà temporanee come i riflessi sullo schermo. Un contrasto cromatico sufficiente è uno dei modi più efficaci e semplici per rendere i contenuti web accessibili a tutti questi utenti.
Uno scarso contrasto tra testo e sfondo è uno dei problemi di accessibilità più comuni negli audit web. Usando una verifica del contrasto WCAG durante la progettazione e lo sviluppo, i team possono individuare e correggere i problemi di contrasto prima che arrivino in produzione, riducendo i costi di correzione e garantendo fin dall'inizio la conformità alle norme sull'accessibilità.
Un buon contrasto cromatico giova anche agli utenti senza disabilità. Migliora la leggibilità alla luce intensa del sole, sugli schermi di bassa qualità e negli ambienti ricchi di distrazioni. Una progettazione accessibile è una progettazione inclusiva, che crea un'esperienza migliore per tutti.
Domande frequenti
Qual è la differenza tra WCAG AA e AAA?
Il livello WCAG AA è il livello di conformità standard raccomandato per la maggior parte dei siti web e delle applicazioni. Richiede un rapporto di contrasto minimo di 4,5:1 per il testo normale e di 3:1 per il testo grande. Il livello WCAG AAA è più rigoroso e richiede 7:1 per il testo normale e 4,5:1 per il testo grande. Anche se il livello AAA non è sempre raggiungibile per tutti i contenuti, è raccomandato per gli elementi di testo critici e dove serve la massima leggibilità.
Cosa si intende per testo grande nelle WCAG?
Secondo le WCAG 2.1, si definisce testo grande quello di almeno 18 punti (circa 24 pixel CSS) oppure di 14 punti (circa 18,66 pixel CSS) se in grassetto. Il testo grande ha requisiti di contrasto inferiori perché la sua dimensione lo rende già di per sé più facile da leggere.
Questo strumento supporta la trasparenza o i canali alfa?
Questo strumento funziona con colori esadecimali opachi (codici esadecimali a 6 cifre). Per i colori con trasparenza, il contrasto effettivo dipende dallo sfondo dietro il livello trasparente, che può variare nella pagina. Per verificare un testo semitrasparente, calcoli prima il colore pieno effettivo risultante dalla sovrapposizione trasparente sullo sfondo reale, poi testi qui quel colore pieno.
La conformità alle WCAG è obbligatoria per legge?
In molte giurisdizioni sì. L'ADA negli Stati Uniti, l'European Accessibility Act nell'UE, l'Accessibility for Ontarians with Disabilities Act (AODA) in Canada e normative analoghe in altri Paesi fanno riferimento al livello AA delle WCAG 2.1 come standard per l'accessibilità digitale, oppure lo recepiscono. Le organizzazioni che non rispettano questi requisiti rischiano azioni legali, sanzioni e danni di reputazione.